CSS
JavaScript
HTML5

jsによるCSSの動的定義

More than 3 years have passed since last update.

===========

※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独自っぽい)

が用意されてる。