insertRuleメソッドについて
HTMLStyleElement
の sheet
プロパティは常に存在するわけではないらしい。
var s = document.createElement("style"); // この時点ではまだ存在していない console.log(s.sheet); // ==> null s.sheet.insertRule("#hoge{box-shadow:1px 1px #333;}", 0); // もちろん例外発生 document.getElementsByTagName("head")[0].appendChild(s); // ここで初めて参照を持つようになる console.log(s.sheet); // ==> [object CSSStyleSheet] s.sheet.insertRule("#hoge{box-shadow:1px 1px #333;}", 0); // 通った!
と、いうようなことを先ほど初めて知りましてね。
さて、FirefoxとChromeは上記のような挙動なのですが、
IE9では文書内に反映されていない状況でも s.sheet
で参照が返ってきました。*1
これはどっちの実装が正しいんでしょうか?
*1:つまり、 appendChild
していなくても s.sheet.insertRule
できる