htsign's blog

ノンジャンルで書くつもりだけど技術系が多いんじゃないかと思います

insertRuleメソッドについて

HTMLStyleElementsheet プロパティは常に存在するわけではないらしい。

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); // 通った!

と、いうようなことを先ほど初めて知りましてね。

さて、FirefoxChromeは上記のような挙動なのですが、
IE9では文書内に反映されていない状況でも s.sheet で参照が返ってきました。*1

これはどっちの実装が正しいんでしょうか?

*1:つまり、 appendChild していなくても s.sheet.insertRule できる