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

Question

借助这个答案(获取所有css类背景和颜色属性值),我可以获得所有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)} ));
})