Cat Paw Software

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== JavaScriptでCSS操作 ======
===== 動的にCSSを追加するには =====
HTMLエレメントを取得してstyleで設定
<code javascript>
var e = document.getElementById("hoge");
e.style.backgroundColor = "#CCCCCC";
</code>

===== 複数の要素にまとめて適用させるには =====
CSSStyleSheetを動的に作る
<code javascript>
var style = document.createElement("style");
style.setAttribute("type", "text/css");
style.appendChild(document.createTextNode("")); 
document.getElementsByTagName("head")[0].appendChild(style);

var sheet = style.sheet;
// sheet.addRule(".clazzName { color: blue; }");   // IE?
sheet.insertRule(".clazzName { color: blue; }", sheet.cssRules.length);
</code>
クラス化すると楽かも（要prototype.js）
<code javascript>
var DynamicCSS = Class.create();
DynamicCSS.prototype = {
    initialize: function() {
        var style = document.createElement("style");
        style.setAttribute("type", "text/css");
        style.appendChild(document.createTextNode(""));
        document.getElementsByTagName("head")[0].appendChild(style);

        this.sheet = style.sheet;
    },
    appendRule: function(selector, rules) {
        r= new Array();
        for (var i in rules) {
            if (rules.hasOwnProperty(i)) {
                r.push(i + ":" + rules[i]);
            }
        }

        rule = r.join(";");
        if (this.sheet.addRule) {
            this.sheet.addRule(selector + "{" + rule + ";}");
        } else {
            this.sheet.insertRule(selector + "{" + rule + ";}", this.sheet.cssRules.length);
        }
    }
};
</code>
参考：[[http://d.hatena.ne.jp/amachang/20070703/1183445387|Safari で CSSStyleSheet オブジェクトを生成する方法 - IT戦記]]