Javascript 获取所有css类的背景&；颜色属性值_Javascript_Jquery_Css_Arrays

Javascript 获取所有css类的背景&；颜色属性值

javascript jquery css arrays

Javascript 获取所有css类的背景&；颜色属性值,javascript,jquery,css,arrays,Javascript,Jquery,Css,Arrays,我想获得所有CSS声明的所有背景和颜色属性值例如： body { background: #fff; } .aaa { background: #dedede; color: #000 } .text { color: #333; padding: 10px } 我想得到这样的输出，这些属性的值需要存储在数组中 body { background: #fff;

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

要阅读样式，请使用

document.styleSheets

，其中包含所有信息（

let cssArr=…

在代码段中）。当您将其读入数组时，就可以从该数组中生成字符串（

let gencsstr

in snippet）。以这种方式读取的颜色为格式，例如

rgb（255，255，255）

，因此我们需要将它们转换为十六进制（通过

rgbToHex

src）

const rgbToHex=（rgbStr）=>rgbStr&&'#'+rgbStr.slice（4，-1）.split（'，'）.map（x=>（+x）.toString（16）.padStart（2，'0'））.join（''）；
const styles=document.styleSheets；
让cssArr=[…样式[0].cssRules].map（x=>（{
类别：x.selectorText，
颜色：rgbToHex（x.style.color），
背景：rgbToHex（x.style.background），
}));
让gencsstr=''；cssArr.forEach（x=>gencsssstr+=`
${x.class}{
${（x.background？'background:'+x.background:''）}
${（x.color？'color:'+x.color:''）}
}
`.替换（/^\n/gm，）；//删除空行
log（“array:，JSON.stringify（cssArr））；
log（“文本：\n”，gencsstr）
正文{
背景：#fff；
}
.aaa{
背景：#dedede；
颜色：#000
}
.文本{
颜色：#333；
填充：10px
}

jQuery测试
$（函数（）{
var myArray=[]；
$（“*”）。每个（函数（）{
var oneArray=[]；
变量标记=$（this.prop（“标记名”）；
var classname=$（this.attr（“类”）？$（this.attr（“类”）：“不适用”；
var background=$（this.css（“背景色”）；
var color=$（this.css（“color”）；
oneArray[“标记”]=标记；
oneArray[“classname”]=类名称；
oneArray[“背景”]=背景；
oneArray[“color”]=颜色；
myArray.push（oneArray）；
});
log（myArray）；
});
身体{
背景：#fff；
}
.myClass{
背景：#dedede；
颜色：#000
}
.myClass2{
颜色：#333；
背景：#fff；
}
请参考此答案：“我希望获得这样的输出，这些属性需要存储在数组中。”-您希望输出为格式化字符串和数组吗？数组格式是什么？@nnnnnnnn像这样[“#fff”、“#dedede”、“#000”、“#333”]很好的回答，但请添加解释数组：[{“类”：“体”、“色”：“背景”：“#ffffNaN”}，{“类”：.myClass”，“色”：“#000000”、“背景”：“#enaded”}，{“类”：“.myClass2”，“色”：“#333 ffnan@VipinKumarSoni你能给你看颜色的css吗？我使用了一些简单的rgbToHex
函数，可以与OP样式一起使用-但是你可以在stackOverflow中找到更复杂的rgbToHex版本（但这不是OP问题的主题，所以我不会在这个答案中深入探讨）@KamilKiełczewski收到以下错误->未捕获的DomeException:未能从“CSSStyleSheet”读取“cssRules”属性：无法访问rules@Karuppiah这是单独的问题（和问题）-答案可能会有帮助-如果没有找到/提出有关stackoverflow的问题。如果出现CORS问题，您可能无法使用此解决方案（直接或根本无法使用）
<!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>