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

Question

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

我知道文件的名称,它被注入页面并在某些时候通过JS注入.

Answer 1

使用此,请记住:

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

setStyleRule = function(selector, rule, sheetName="myStyle") {
    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);
}

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即可。

这是我的测试代码：

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);
    }
  }
}

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++;
  });
});