JavaScript の addRule と insertRule をまとめる

2011/10/13 : IE8だと動かないミスがあったので一部修正(addRule の引数部分)

IE とそれ以外のブラウザで一々処理を分けるのも面倒くさいし、CSSがある場合ない場合の処理を分けるのも面倒なので以下の様にすると楽ちん……かも。
head がない場合はもう知らん。


// スタイルシート挿入用共通メソッド addCSS
    var style = document.createElement('style');
    style.setAttribute('type', 'text/css');
    document.getElementsByTagName('head')[0].appendChild(style);
    var sheet = document.styleSheets[0];
    if (sheet.insertRule) {
        sheet.addCSS = function(selector, property, value) {
            sheet.insertRule(selector + '{' + property + ':' + value + ';}', sheet.cssRules.length);
        };
    } else {
        sheet.addCSS = function(selector, property, value) {
            sheet.addRule(selector, property + ':' + value);
        };
    }
You can leave a response, or trackback from your own site.

Leave a Reply

Subscribe to RSS Feed Follow me on Twitter!