読者です 読者をやめる 読者になる 読者になる

メモを揉め

お勉強の覚書。

append-cssというnpmモジュールを作った

CSSルールを追加するだけのモジュールです。

npm: append-css

インストール

Nodeがあってnpmが使える場合は、

npm install append-css

npmがない場合はgithub: append-cssからダウンロード。

使い方

ブラウザの場合

browser/build.jsを読み込む。

<script src="browser/build.js"></script>
<script>
    var appendCSS = require('append-css');
</script>

Browserifyの場合

requireで読み込む。

var appendCSS = require('append-css');

メソッド

appendCSS(CSS) -> styleElement

新しいCSSルールを追加する。

  • 引数

    • css: string
      追加したいCSSルールの文字列。
  • 戻り値

    • styleElement: HTMLStyleElement
      CSSルールが追加された<style>要素。

var styleEle = appendCSS('body { background: black; }');

appendCSS.reset() -> styleElement

今までappendCSSで追加してきたルールを全て無効にする。

  • 引数

    • 無し
  • 戻り値

    • styleElement: HTMLStyleElement
      次から新しいルールを追加することになる<style>要素。 それまでルールを追加していた<style>要素とは別の新しいインスタンス

var newStyleEle = appendCSS.reset();

用途

ちょこちょこっとスクリプトからスタイルを足したり消したりできます。

CSSファイルに分けると利便性が損なわれるような、ごくごく小さい規模のスタイルをJavaScriptでコントロールしたり、インラインスタイルだと煩雑になってCSSルールで書けたほうが便利な時などに有効かもしれないです。

CoffeeScriptだとCSSが書きやすいのでオススメです。

appendCSS '''
  .hide {
      display: none;
  }
'''