CSSのクラスの値をJavaScriptで変更する方法

jQuery に有りそうで無いのでクラスに設定したスタイルを後からJavascript変更する方法をメモ。

function Common(){this.initialize.apply(this, arguments)};
(function(Class){

    /**
     * ルールのキャッシュ
     * @type CSSStyleRule
     */
    var classCssRuleCache = {};

    /**
     * セレクタに一致するルールを取得。
     * <li>検索は重いのキャッシュする。
     * @param {string} selectror セレクタ文字列
     * @returns {CSSStyleRule} ルール
     */
    Class.getCssRule = function(selector) {
        if (classCssRuleCache[selector]) return classCssRuleCache[selector];
        var sheets = document.styleSheets;
        for (var i=0; i<sheets.length; i++) {
            var rules = sheets[i].cssRules;
            if (rules == null) rules = sheets[i].rules; // ForIE
            for (var j=0; j<rules.length; j++) {
                if (selector == rules[j].selectorText) {
                    classCssRuleCache[selector] = rules[j];
                    return rules[j];
                }
            }
        }
        return null;
    }

    /**
     * セレクタに一致するルールを取得。
     * <li>当該セレクタのルールが存在しなければ作成する。
     * @param {string} selectror セレクタ文字列
     * @returns {CSSStyleRule} ルール
     */
    Class.getCssRuleWithDefine = function(selector) {
        var rule = Class.getCssRule(selector);
        if (rule) return rule;

        var sheet = document.styleSheets[0];
        if (sheet.insertRule) {
            sheet.insertRule(selector+"{}", sheet.cssRules.length);
        } else {
            sheet.addRule(selector,"dummy:dummy");//forIE
        }
        return Class.getCssRule(selector);
    }
   
   
    /**
     * セレクタにルールを設定。
     * <li>当該セレクタのルールが存在しなければ作成する。
     * @param {string} selectror セレクタ文字列
     * @param {object} スタイルのマッピング 例：{textAling: "center",…}
     */
    Class.setCssRule = function(selector, style) {
        var rule = Class.getCssRuleWithDefine(selector);
        if (rule == null) return;
        for (var k in style) rule.style[k] = style[k];
    }
   
   
    /**
     * セレクタにルールを important 付きで設定。
     * <li>当該セレクタのルールが存在しなければ作成する。
     * @param {string} selectror セレクタ文字列
     * @param {object} スタイルのマッピング 例：{textAling: "center",…}
     */
    Class.setCssRuleImportant = function(selector, style) {
        var rule = Class.getCssRuleWithDefine(selector);
        if (rule == null) return;
        for (var k in style) rule.style.setProperty(k, style[k], 'important');
    }

})(Common);

使用例：

Common.getCssRule(".MyClass", {textAlign:"center", color:"red"});

だけ。setCssRuleImportant()を使えば !impotant 付きになる。
厳密に言うとクラスのスタイルの言うものは存在しないのでセレクタのスタイルを変更している。つまり第一引数にクラス名を指定する時はドット(.)が必須なので注意。


間単に解説すると読み込まれたCSSはブラウザ依存で以下のプロパティに保存されている。

ブラウザ	プロパティ名
IE8以前	document.styleSheets[ ].rules[ ]
その他	document.styleSheets[ ].cssRules[ ]

cssRules[ ] の型は CSSStyleRule で以下のプロパティを持つ。

型	プロパティ名	説明
string	selectorText	セレクタ文字列
CSSStyleDeclaration	style	スタイルセット

セレクタ文字列の正規化の方法は不明だったので複雑なセレクタを変更する場合は自力で正規化をする必要があるかもしれない。(タグ名の大文字／小文字や空白の扱いの事)

IE8以前はルールの追加方法も異る。

ブラウザ	プロパティ名
IE8以前	addRule(selector, style[, index])
その他	insertRule(rule,index)

あと @import とか対応が必要だけどあんまり使わないから必要になるまで放置かな(^^;