获取所有 CSS 类的背景和颜色属性值答案

【问题标题】：get all css classes background & color properties values获取所有 CSS 类的背景和颜色属性值
【发布时间】：2019-07-12 13:51:45
【问题描述】：

我想获取所有 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); 
});

【问题讨论】：

参考这个答案：stackoverflow.com/questions/14318209/…
“我想得到这样的输出，这些属性需要存储在数组中。” - 您希望输出为格式化字符串和作为一个数组？数组格式是什么？
@nnnnnn 喜欢这个 ["#fff", "#dedede", "#000", "#333"]

标签： javascript jquery css arrays

【解决方案1】：

要阅读样式，请使用包含所有信息的document.styleSheets（sn-p 中的let cssArr=...）。当您将其读入数组时，您可以从该数组生成字符串（sn-p 中的let genCssStr）。以这种方式读取的颜色是格式，例如rgb(255, 255, 255) 所以我们需要将它们转换为十六进制（by 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
    }

【讨论】：

不错的答案，但请添加解释
数组：[{"class":"body","color":"","background":"#ffffNaN"},{"class":".myClass","color" :"#000000","background":"#dedeNaN"},{"class":".myClass2","color":"#333333","background":"#ffffNaN"}]
@VipinKumarSoni 你能给你看css的颜色吗？我使用了一些简单的 rgbToHex 函数，它适用于 OP 样式 - 但你可以在 stackOverflow 中找到更复杂的 rgbToHex 版本（但这不是 OP 问题的主题，所以我不会在这个答案中深入探讨）
@KamilKiełczewski 收到此错误 -> 未捕获的 DOMException：无法从“CSSStyleSheet”读取“cssRules”属性：无法访问规则
@Karuppiah 这是单独的问题（和问题） - 可能是 this 答案会有所帮助 - 如果在 stackoverflow 上找不到/询问问题。如果出现 CORS 问题，您可能无法使用此解决方案（直接或根本无法使用）

【解决方案2】：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery Tests</title>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script>
        $(function(){
            var myArray = [];
            $("*").each(function() {
                var oneArray = [];
                var tag = $(this).prop("tagName");
                var classname = $(this).attr("class") ? $(this).attr("class") : "N/A";
                var background = $(this).css("background-color");
                var color = $(this).css("color");

                oneArray["tag"] = tag;
                oneArray["classname"] = classname;
                oneArray["background"] = background;
                oneArray["color"] = color;

                myArray.push(oneArray);                                             
            });
            console.log(myArray);
        });
        </script>
        <style>
        body {
          background: #fff;
        }
        .myClass {
            background: #dedede;
            color: #000
        }
        .myClass2 {
            color: #333;
            background: #fff;
        }
        </style>
    </head>
    <body>
        <a class="myClass" href="#">link</a>
        <div class="myClass2"></div>
    </body>
</html>

【讨论】：