按名称而不是索引获取 document.styleSheets？

Question

document.styleSheets与索引一起使用，
但是如果我想在一个特定的 CSS 文件中使用stylesheet.insertRule呢？

我知道文件的名称，它被注入到页面中，并在某个时候通过 JS 注入。

Answer 1

使用它，并记住：

出于安全原因，Opera 和 Mozilla 不允许您访问来自其他域或协议的样式表的 cssRules 集合。 尝试访问它会引发安全违规错误

function setStyleRule (selector, rule, sheetName) {
    var sheets = document.styleSheets,
        stylesheet = sheets[(sheets.length - 1)];
    
    for( var i in document.styleSheets ){
        if( sheets[i].href && sheets[i].href.indexOf(sheetName + ".css") > -1 ) {
            stylesheet = sheets[i];
            break;
        }
    }
    
    if( stylesheet.addRule )
        stylesheet.addRule(selector, rule);

    else if( stylesheet.insertRule )
        stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}

---

更新 - 更短的代码：

function getSetStyleRule(sheetName, selector, rule) {
    var stylesheet = document.querySelector('link[href*=' + sheetName + ']')

    if( stylesheet ){
        stylesheet = stylesheet.sheet
        stylesheet.insertRule(selector + '{ ' + rule + '}', stylesheet.cssRules.length)
    }

    return stylesheet
}

// Usage example
getSetStyleRule('main', 'body', 'background:red')

Answer 2

为什么这么复杂？ 您可以通过 ID 或 URL 获取特定的文档样式表，而无需遍历文档中的所有样式表： var mysheet = $('link#id')[0].sheet; ... 或 ... var mysheet = $('link[href="/css/style.css"]')[0].sheet;

Answer 3

这是 vsync 对答案的小幅调整。

function addRule(stylesheetId, selector, rule) {
  var stylesheet = document.getElementById(stylesheetId);

  if (stylesheet) {
    stylesheet = stylesheet.sheet;

    if (stylesheet.addRule) {
      stylesheet.addRule(selector, rule);
    } else if (stylesheet.insertRule) {
      stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
    }
  }
}

通过 document.getElementById 获得 DOM 对象后，您可以使用“sheet”属性来访问实际的样式表。 因此，只需确保为要更改的样式表提供 ID。 即使是外部CSS文件，也只要给它一个ID即可。

这是我的测试代码：

 var index = 0; var items = [ { selector: "h1", rules: "color:#3333BB;font: bold 18px Tahoma;padding: 12px 0 0 0;" }, { selector: "p", rules: "padding:0;margin:0;background-color:#123456;color:#ABCDEF;"}, { selector: "b", rules: "font-weight:normal;"}, { selector: "i", rules: "color:#66FF66;" } ]; function addRule(stylesheetId, selector, rule) { var stylesheet = document.getElementById(stylesheetId); if (stylesheet) { stylesheet = stylesheet.sheet; if (stylesheet.addRule) { stylesheet.addRule(selector, rule); } else if (stylesheet.insertRule) { stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length); } } } $(document).ready(function () { $("button").click(function () { addRule("myStyles", items[index].selector, items[index].rules); index++; }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <style id="myStyles"> div { border: solid 1px black; width: 300px; height: 300px; } </style> <button>Click Me 4 times slowly</button> <div> <h1>test</h1> <p>Paragraph One</p> <p>Paragraph with <b>bold</b> and <i>Italics</i></p> <p>Paragraph 3</p> </div>

Answer 4

没有jQuery：

 function addRule(stylename, selector, rule) { var stylesheet = document.querySelector(`link[href$="${stylename}.css"]`) if( stylesheet.addRule ) stylesheet.addRule(selector, rule); else if( stylesheet.insertRule ) stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length); } // example use addRule('styles.css', '.color', 'red')

Answer 5

发生这种情况是因为 CSS 的地址与页面的地址不同。 修复只是让两者都有一些地址。