Question

借助此答案（get all css classes background & color properties values），我可以获得所有CSS类的背景和颜色属性值。当我使用内部CSS代码时，它可以工作。

现在，我有超过35个外部CSS样式表。当我尝试以下代码时，它仅返回第一个外部CSS文件输出。无法获取剩余的样式表背景和颜色属性值。如何访问剩余的样式表？

$('#nightMode').on('click', function() {
    // var color = $("body").css("background");
    // var test = invertColor("#00a3fe"); 
    // console.log(color); 

    let styles = document.styleSheets;

    const rgbToHex = (rgbStr) => !rgbStr ? '':'#' + rgbStr
      .slice(4,-1)
      .split(', ')
      .map(x => (+x).toString(16).padStart(2, '0'))
      .join('');

    let cssArr =[...styles[0].cssRules].map(x=> ({
      class: x.selectorText,
      background: rgbToHex(x.style.background),
      color: rgbToHex(x.style.color)
    } ));

    let genCssStr='';
    genCssStr+= '<style> \n\n';
    cssArr.forEach(x=> genCssStr+=`${x.class}{\n` + 
      (x.background ? `  background:${invertColor(x.background)};\n` : '') + 
      (x.color ? `  color:${invertColor(x.color)};\n` : '') + `}\n\n`);
    genCssStr+= '</style>';

    console.log(styles);
    console.log(genCssStr);
    $(genCssStr).appendTo("body");
    // console.log("array:", JSON.stringify(cssArr));
    // console.log("text:\n\n", genCssStr);
});

Answer 1

主要问题是您仅在迭代第一个样式表。您需要迭代所有样式表。 还请注意，您无法枚举跨域样式表的cssRules属性。

以下代码处理所有样式表（<link rel>和<style>）中的所有css规则。如果无法访问外部样式表，则会添加try...catch块以忽略DOMException：

var cssArr = [];
[...document.styleSheets].forEach(function(styleSheet) {
  var cssRules;
  try {
    cssRules = styleSheet.cssRules;
  } catch (e) {
    console.log("Cannot process " + styleSheet.href);
    return;
  }
  [...cssRules].forEach(function(cssRule) {
    cssArr.push({
      class: cssRule.selectorText,
      background: cssRule.style.background,
      color: cssRule.style.color
    });
  });
});
console.log(cssArr);

Answer 2

与仅使用索引0：styles[0].cssRules一样，您仅访问第一个外部文件。您应该像这样遍历所有文件：

styles.forEach(style => {
  let cssArr =[...style.cssRules].map(x=> ({ class: x.selectorText, background: rgbToHex(x.style.background), color: rgbToHex(x.style.color)} ));
})

Answer 3

This answer描述了为什么某些规则可能无法访问的原因。

总而言之，如果css资源是跨域的，则安全限制会阻止访问。

此外，在该答案中还有this reference，它描述了样式表界面，并明确声明了上述声明，其中无法访问跨源资源，这适用于cssRules以及其他一些属性。 document.styleSheets个对象。

下面的代码将优雅地捕获该错误，并将错误或cssRule的输出打印到控制台。

for (let i in [...document.styleSheets]){
    try{
        console.log(styles[i]['cssRules']);
    }catch(e){
        console.log(e);
    }
}

cssRules无法读取多个样式表类的属性值

3 个答案: