IEで動的にstyleタグを追加する方法

ie

最初、Firefox等のようにcreateElement('style')してそれにTextNodeをappendChildする方法を方法だと、なんだかよくわからないエラーが出てだめだった。

日本語の情報として、linkタグで外部スタイルシートを動的に適用する方法はけっこうみつかったんだけど、styleタグを直接生成する方法についての情報がなかなかなかったので、ここに書いておく。

StackOverflowなどのサイトに解決方法があった。
とりあえず、以下のようにしたら動的にstyleタグを追加することができる。

<html>
  <head>
    <title>js test</title>
    <script type="text/javascript">
      function loaded() {
        css = document.createElement('style');
        css.type = 'text/css';
        css.styleSheet.cssText = "h1 { background-color: pink }";
        document.getElementsByTagName("head")[0].appendChild(css);
      }
    </script>
  </head>
  <body onload="loaded()">
    <h1>テスト</h1>
    <ul>
      <li>ああああ</li>
      <li>いいいいいい</li>
      <li>ううう</li>
    </ul>
  </body>
</html>

styleタグのstyleSheet.cssTextプロパティにスタイル定義の文字列をわたしてあげれば良い。

styleSheetプロパティなんてのがあるのなんて知らなかった。
ちゃんと仕様を調べてないので、他に正しい方法があるのかもしれない。

参考

追記

コメントもらって気がついた。
以下の記事をブクマしてたの忘れてた。
http://d.hatena.ne.jp/os0x/20090126/1232953502