get all css classes background & color properties values

Question

I want to get all background and color properties values of all CSS declarations.

For example:

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

I want to get an output like this and the values of these properties need to be stored in an array.

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

I tried to do this using jQuery. I can get the background property value of one specific class like .aaa or .text. How do I get the values of all classes?

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

refer to this answer: stackoverflow.com/questions/14318209/… — RK_15
– RK_15, Commented Feb 19, 2019 at 6:11
"I want to get output like this and these properties need to be stored in array." - You want output as a formatted string and as an array? What would the array format be? — nnnnnn
– nnnnnn, Commented Feb 19, 2019 at 6:13

Kamil Kiełczewski · Accepted Answer · 2019-02-19 09:23:42Z

7

To read style use document.styleSheets which contains all information (let cssArr=... in snippet). When you read it into your array then you can generate string from that array (let genCssStr in snippet). The colors read in this way are in format e.g. rgb(255, 255, 255) so we need to convert them to hex (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
    }

edited Feb 19, 2019 at 9:23

answered Feb 19, 2019 at 6:25

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

לבני מלכה Over a year ago

nice answer but please add explanation

Vipin Kumar Soni Over a year ago

array: [{"class":"body","color":"","background":"#ffffNaN"},{"class":".myClass","color":"#000000","background":"#dedeNaN"},{"class":".myClass2","color":"#333333","background":"#ffffNaN"}]

Kamil Kiełczewski Over a year ago

@VipinKumarSoni can you show you css for colors? I use some simple rgbToHex function which works with OP styles - but you can find more sophisticated rgbToHex version in stackOverflow (but this is not topic of OP question so I will not dig into it in this answer)

Karuppiah RK Over a year ago

@KamilKiełczewski got this error -> Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

Kamil Kiełczewski Over a year ago

@Karuppiah this is separate problem (and question) - may be this answer will helps - if not find/ask question on stackoverflow. In case of CORS problem you will probably be unable to use this solution (in direct way or at all)

Vipin Kumar Soni · Accepted Answer · 2019-02-19 07:10:02Z

<!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>

Collectives™ on Stack Overflow

get all css classes background & color properties values

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related