javascript - 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添加 block 以在无法访问外部样式表时忽略 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);