CSS のルールを javascript から動的に追加する
display:none にしておいた div の innerHTML に
'<span> </span><style type="text/css">' + css + '</style>'
を代入する方法もありますが、それ以外の方法です。
追加する場合。
function addStyle(css) { var style = document.getElementById("dynamic-style"); if (!style) { style = document.createElement("style"); style.id = "dynamic-style"; style.setAttribute("type", "text/css"); var heads = document.getElementsByTagName("head"); heads[0].appendChild(style); } if (typeof style.styleSheet == "undefined") { style.innerHTML = ""; style.appendChild(document.createTextNode(css)); } else { style.styleSheet.cssText = css || " "; } }
追加したのを消す場合。
IE の場合、style 要素をいきなり削除するとルールが消されたことを認識しないので空のルールを設定してから削除。
function clearStyle() { var style = document.getElementById("dynamic-style"); if (style) { if (typeof style.styleSheet != "undefined") { style.styleSheet.cssText = " "; // IE } style.parentNode.removeChild(style); } }
ちなみに IE で style.styleSheet.cssText に空文字列を代入すると crash してしまいます。
see Bug Report: IE won't allow document.createElement('style') の11番目のコメント