javascript - 获取所有 css 类背景和颜色属性值

Question

我想获取所有 CSS 声明的所有背景和颜色属性值。

例如:

    body {
      background: #fff;
    }
    .aaa {
      background: #dedede;
      color: #000
    }
    .text {
      color: #333;
      padding: 10px
    }

我想得到这样的输出，这些属性的值需要存储在一个数组中。

    body {
      background: #fff;
    }
    .aaa {
      background: #dedede;
      color: #000
    }
    .text {
      color: #333;
    }

我尝试使用 jQuery 来做到这一点。我可以获得一个特定类的背景属性值，如 .aaa 或 .text。如何获取所有类的值？

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

Answer 1

要阅读样式，请使用包含所有信息的 document.styleSheets(代码段中的 let cssArr=...)。当您将它读入您的数组时，您可以从该数组生成字符串(代码段中的 let genCssStr)。以这种方式读取的颜色格式为 e.g. rgb(255, 255, 255) 所以我们需要将它们转换为十六进制(通过 rgbToHex src here )

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

const styles = document.styleSheets;

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

let genCssStr=''; cssArr.forEach(x=> genCssStr+=`
${x.class} {
  ${(x.background ? 'background: '+x.background : '')}
  ${(x.color ? 'color: '+x.color : '')}
}
`.replace(/^  \n/gm,'')); // remove empty lines 

console.log("array:", JSON.stringify(cssArr));
console.log("text:\n", genCssStr);

body {
      background: #fff;
    }
    .aaa {
      background: #dedede;
      color: #000
    }
    .text {
      color: #333;
      padding: 10px
    }