jsによるCSSの動的定義

===========

※2012年に書いたものを移植。

styleタグをDOMに追加すると、そのたび全要素レンダリングが発生するので実用的ではない。
DOMにCSS追加用のAPIが用意されているのでそれを使いましょう。

参考 mozilla::insertRule サンプル

フロー

1. スクリプト操作用のstyle要素を生成し、headに入れておく

var style = document.createElement("style");
document.head.appendChild( style );

1. style.sheetからCSSStyleSheetオブジェクトが参照できるので、それを取得。

var sheet = style.sheet;

1. 取得したオブジェクトにinsertRule("css文字列", index )

sheet.insertRule( "#container { margin:0;padding:0; }", 0 );

尚、CSSStyleSheetには

• instertRule(cssString,index)
• deleteRule(index)
• addRule(元々IE独自っぽい)

が用意されてる。