web-dev-qa-db-ja.com

JavaScriptを使用してCSSスタイルシートを変更することは可能ですか？ （オブジェクトのスタイルではなく、スタイルシート自体）

JavaScriptを使用してCSSスタイルシートを変更することは可能ですか？

私は[〜＃〜]ではない[〜＃〜]について話している：

document.getElementById('id').style._____='.....';

私[〜＃〜] am [〜＃〜]変更について話している：

#id {
    param: value;
}

頭の中に新しいオブジェクトを作成したり、そこにスタイルタグをinnerHTMLしたりするなど、汚いこと（まだ試していません）を行う以外に、これは機能したとしても、スタイルとしていくつかの問題を引き起こします。ブロックはすでに他の場所で定義されており、ブラウザーが動的に作成されたスタイルブロックをいつ解析するかさえわかりません

javascripthtmlcssstylesheetalter
28
anonymous-one

2011年現在

はい、できますが、ブラウザ間の互換性の問題が発生します。

http://www.quirksmode.org/dom/changess.html

2016年現在

ブラウザのサポートが大幅に改善されました（IE9 +を含むすべてのブラウザがサポートされています）。

  • insertRule() メソッドを使用すると、スタイルシートにルールを動的に追加できます。

  • deleteRule() を使用すると、スタイルシートから既存のルールを削除できます。

  • スタイルシート内のルールには、スタイルシートの cssRules 属性を介してアクセスできます。

30
Mathieu Rodic

.insertRule および .cssRules これをIE9までさかのぼって実行できるようにするには：

function changeStylesheetRule(stylesheet, selector, property, value) {
    // Make the strings lowercase
    selector = selector.toLowerCase();
    property = property.toLowerCase();
    value = value.toLowerCase();

    // Change it if it exists
    for(var i = 0; i < s.cssRules.length; i++) {
        var rule = s.cssRules[i];
        if(rule.selectorText === selector) {
            rule.style[property] = value;
            return;
        }
    }

    // Add it if it does not
    stylesheet.insertRule(selector + " { " + property + ": " + value + "; }", 0);
}

// Used like so:
changeStylesheetRule(s, "body", "color", "rebeccapurple");

デモ

8
Zach Saucier

一連のスタイルをプログラムでオブジェクトに追加したい場合、プログラムでクラスをオブジェクトに追加する方が簡単です（このようなクラスには、CSSでスタイルが関連付けられています）。 CSSで優先順位を制御できるため、新しいクラスの新しいスタイルで以前のスタイルを上書きできます。これは一般に、スタイルシートを直接変更するよりもはるかに簡単で、完全にブラウザ間で機能します。

2
jfriend00