Posted at

jsによるCSSの動的定義

More than 5 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独自っぽい)

が用意されてる。