append-cssというnpmモジュールを作った
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ルールを追加する。
var styleEle = appendCSS('body { background: black; }');
appendCSS.reset() -> styleElement
今までappendCSS
で追加してきたルールを全て無効にする。
引数
- 無し
戻り値
- styleElement: HTMLStyleElement
次から新しいルールを追加することになる<style>
要素。 それまでルールを追加していた<style>
要素とは別の新しいインスタンス。
- styleElement: HTMLStyleElement
var newStyleEle = appendCSS.reset();
用途
ちょこちょこっとスクリプトからスタイルを足したり消したりできます。
CSSファイルに分けると利便性が損なわれるような、ごくごく小さい規模のスタイルをJavaScriptでコントロールしたり、インラインスタイルだと煩雑になってCSSルールで書けたほうが便利な時などに有効かもしれないです。
CoffeeScriptだとCSSが書きやすいのでオススメです。
appendCSS ''' .hide { display: none; } '''