CSS のルールを javascript から動的に追加する

display:none にしておいた div の innerHTML に

'<span>&nbsp;</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);
  }
}

Firefox, IE, Opera は動作しました。

ちなみに IE で style.styleSheet.cssText に空文字列を代入すると crash してしまいます。

see Bug Report: IE won't allow document.createElement('style') の11番目のコメント