JavaScriptを使ってCSSを変更というのは良くあることだ。例えばクリックで表示を消す場合やフェードアウトさせるような類のイフェクトがある。$(“hoge”).style.display=“inline”;のような指定をするだろう。

ピクチャ 1-27

しかしこれではCSSとJavaScriptの距離が遠い。もっとダイナミックにCSSを操作しよう。

今回紹介するオープンソース・ソフトウェアはDynamic CSS via JavaScript、JavaScriptによるCSS操作ライブラリだ。

まさにダイナミック。CSSというオブジェクトを生成し、そこにルール(CSS指定)を追加していくという形式で描かれる。スタイルタグを動的に生成し、描画を変化させられる。

ピクチャ 2-28

利点は何だろうか。まず、CSS上の指定を変数にまとめられるようになる。また、タグクラウドのような状態によってフォントサイズを変更するようなものを、ループで一発指定したり、クライアントサイドで操作できるようになる。

利用にはMootools.jsを利用するが、Dynamic CSS via JavaScriptの本体はわずか1.38KB程度だ(圧縮版)。これを活用できれば、これまでとは全く違うデザイン手法ができるようになるかも知れない。

Dynamic CSS via JavaScript
 http://revnode.com/oss/css/