JavaScript の style.cssText と style.styleProperty

style.cssText と style.styleProperty がよくわかってなかったのでメモ。

style.cssText で書いた場合はもともとあった style 属性を一新する。下の例で言うと color: red はなくなり、text-decoration: underline のみが有効になる。

var e = document.getElementById("body");
e.style.cssText = "color: red";
e.style.cssText = "text-decoration: underline";

style.cssText で追記する場合は以下のような方法が使える。

var e = document.getElementById("body");
e.style.cssText  = "color: red";
e.style.cssText += "text-decoration: underline";

var e = document.getElementById("body");
e.style.cssText = "color: red";
e.style.cssText = e.style.cssText + "text-decoration: underline";

style.styleProperty の場合は style 属性の内容に追加し、そのプロパティが既に存在する場合は置き換える。

var e = document.getElementById("body");
e.style.color = "red";
e.style.textDecoration = "underline";

!important の指定は style.styleProperty では出来ない（？）ので style.cssText で行う。

---

sheet.insertRule を使う場合は stylesheet.style.cssText なんかとごっちゃになるのでこちらもメモ。insertRule ではなく cssText で一気に追加することもできるようだ（ただし、上記のように毎回リセット）。

var e = document.createElement("style");
document.head.appendChild(e);
e.sheet.insertRule("p { font-family: monospace; }", 0);
e.sheet.insertRule("p { color: gray; }", e.sheet.cssRules.length);
document.body.appendChild(
    document.createElement("p").appendChild(
        document.createTextNode(e.sheet.cssRules.length)
    )
);

---

システム側で強制的に挿入される <style> 要素のルールを全て削除する場合は .sheet.deleteRule(index) でいいのかな…。

var e = document.getElementsByTagName("style");
for (var i = 0; e[i] != null; i++) {
    while (e[i].sheet.deleteRule(0));
}

IE で試したときに .cssText = ""; で一括削除出来たような気がするけど、document.getElementsByTagName("style") か document.styleSheets 使ってたかどうか覚えてないんだよな…。

上の方法だと無限ループになりそうだから下の方法で要素ごと消すほうが楽そうだ。

var e = document.getElementsByTagName("style");
while (e[0]) {
    e[0].parentElement.removeChild(e[0]);
}