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

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块以忽略DOMExceptions：

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描述了样式表界面并明确说明了无法访问跨源资源的上述断言，这适用于qssxswpoi对象上的一些其他属性中的cssRules。

下面的代码将正常捕获该错误并将错误的输出或cssRule打印到控制台。

document.styleSheets