web-dev-qa-db-ja.com

CSSStyleSheet.insertRule（）を適切に使用する方法は？

ここでどこが間違っているのかわかりません：/。このコードを実行すると、空白の要素だけが表示されます。 insertRuleメソッドに何も実行させられないようです（エラーも発生しません）。私は何かが足りないのですか？

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
<script>
    var sheet = (function() {
        // Create the <style> tag
        var style = document.createElement("style");

        // WebKit hack
        style.appendChild(document.createTextNode(""));

        // Add the <style> element to the page
        document.head.appendChild(style);

        return style.sheet;
    })();
    sheet.insertRule("\
        #gridContainer {\
            width: 100%;\
            height: 100%;\
        }\
    ", 0);
</script>
</body>
</html>
javascriptcssstylesheet
12
klinore

少し紛らわしいですが、コードは実際に機能します。返されたXMLツリーに挿入されたルールが表示されないだけです。

コードが機能することを確認するには、次の2つのテストを実行できます。

var style = (function() {
    // Create the <style> tag
    var style = document.createElement("style");

    // WebKit hack
    style.appendChild(document.createTextNode(""));

    // Add the <style> element to the page
    document.head.appendChild(style);
  
    console.log(style.sheet.cssRules); // length is 0, and no rules

    return style;
})();
style.sheet.insertRule('.foo{color:red;}', 0);
console.log(style.sheet.cssRules); // length is 1, rule added
<p class="foo">
  I am some text
</p>

上記のスニペットを実行すると、CSSルールが適用されていることがわかります。また、コンソールではcssRulesプロパティも変更されます。

これは、ブラウザー拡張機能がDOMに追加されたカスタムスタイルシートを生成するときによく見られ、デバッグ中はインスペクターに空のスタイルシートとして表示されます。

18
user3459110

このバージョンは、Awalの回答と web archive のJavascriptを使用したTotally PwnCSSに基づいています。 idパラメーターは、getElementByIdを使用してstyleSheetにアクセスする場合に役立ち、mediaパラメータは最適であり、「画面」にデフォルト設定されています。 styleSheet.sheetを返します。これは私の好みです。

function createStyleSheet (id, media) {
    var el   = document.createElement('style');
    // WebKit hack
    el.appendChild(document.createTextNode(''));
    el.type  = 'text/css';
    el.rel   = 'stylesheet';
    el.media = media || 'screen';
    el.id    = id;
    document.head.appendChild(el);
    return el.sheet;
}
1
Jorge Gonzalez