今日の技術

仕事の都合で、スタイルシートを javascript で定義する必要が出てきましたので、書いておきます。

スタイルシートの定義は、以下のケースに分けて考えます。
・Internet Explorer
・それ以外

もう定番ですね。

Internet Explorer の場合
createStylesheet メソッドで、直接スタイルシートを追加します。

// スタイルシート生成、sheet オブジェクト取得
var sheet = document.createStyleSheet();
// スタイル追加
sheet.addRule('BODY', 'background-color:red);

Internet Explorer 以外の場合
style タグを作成し、sheet オブジェクトを取得します。

// style タグ生成
var style = document.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);
// sheet オブジェクト取得
var sheet = style.sheet;
// スタイル追加
sheet.insertRule('BODY{background-color:red}', 0);

見てわかるとおり、スタイルシートの作成は、新しくスタイルシートを生成して、その中に定義をします。
このとき、既存のスタイルシートに定義を追加をしないようにしましょう。
既存のスタイルが存在しない場合や、javascript で上書きされてしまう可能性があるからです。

---

{a8.net http://books.livedoor.com/item/3389102}
{a8.net http://books.livedoor.com/item/2019205}
{a8.net http://books.livedoor.com/item/292325}