How to read CSS rule values with JavaScript?

CSS rules can be read and manipulated using DOM (Document Object Model). To read all the Embedded CSS rules using JavaScript we can use the following approaches.

Approach 1:

  • Use document.getElementsByTagName(“STYLE”); and get all the CSS tag.
  • Check if the length is 0 then ‘no style tag used’.
  • Else, display all the tag using for loop

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS rule values with JS</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
          href=
    <link href=
          rel="stylesheet">
    <style type="text/css">
        h1 {
            text-align: center;
            color: green;
        }
          
        #my_para {
            font-family: 'Satisfy', cursive;
            text-align: justify;
            background-color: powderblue;
            font-size: 130%;
        }
    </style>
</head>
  
<body>
  
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <hr/>
        <p id="my_para">Cascading Style Sheets, fondly referred
          to as CSS, is a simply designed language intended to
          simplify the process of making web pages presentable.
          CSS allows you to apply styles to web pages. More importantly,
          CSS enables you to do this independent of the 
          HTML that makes up each web page.</p>
        <div class="text-center">
            <input id="my_button1" 
                   type="button" 
                   class="btn btn-success" 
                   value="Read All CSS Values">
        </div>
    </div>
  
    <script>
        function alert_css() {
            var style_text = "";
            var style_elements = document.getElementsByTagName("STYLE");
            if (style_elements.length == 0)
                alert("No Style Tag!"); 
               //or use console.log("No Style Tag!");
            else {
                for (var i = 0; i < style_elements.length; i++)
                    style_text += style_elements[i].outerHTML;
                style_text = style_text.toString().replace(/\t/g, '').split('\r\n');
                alert(style_text); 
                //or use console.log(style_text);
            }
        }
        document.getElementById("my_button1").onclick = alert_css;
    </script>
  
</body>
  
</html>

chevron_right


Output:

  • Before:
    output_before_1
  • After “Read All CSS Value” button is clicked:
    output_after_1

Approach 2:

  • Get all the actual (computed) CSS property and values using window.getComputedStyle(elem, null);
  • Display all CSS properties with the help of “for loop”.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS rule values with JS</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href=
    <link href=
          rel="stylesheet">
    <style type="text/css">
        h1 {
            text-align: center;
            color: green;
        }
          
        #my_para {
            font-family: 'Satisfy', cursive;
            text-align: justify;
            background-color: powderblue;
            font-size: 130%;
        }
    </style>
</head>
  
<body>
  
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <hr/>
        <p id="my_para">Cascading Style Sheets, fondly referred to as
          CSS, is a simply designed language intended to simplify 
          the process of making web pages presentable. CSS allows 
          you to apply styles to web pages. More importantly, CSS 
          enables you to do this independent of the HTML that makes 
          up each web page.</p>
        
        <div class="text-center">
            <input id="my_button1" 
                   type="button" 
                   class="btn btn-success" 
                   value="Read All CSS Values">
        </div>
        <h3>CSS Values:</h3>
        <div id="my_div"></div>
    </div>
  
    <script>
        function append_css(div_name, id_name) {
            var elem = document.getElementById(id_name);
            var txt = "";
            var cssObj = window.getComputedStyle(elem, null);
  
            for (i = 0; i < cssObj.length; i++) {
                cssObjProp = cssObj.item(i);
                txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
            }
            document.getElementById(div_name).innerHTML = txt;
        }
        document.getElementById("my_button1").addEventListener('click', function() {
            append_css("my_div", "my_para");
        }, false);
    </script>
  
</body>
  
</html>

chevron_right


Output:

  • Before:
    output_before_2
  • After “Read All CSS Value” button is clicked:
    output_after_2

Note:
The word limit of a pop-up message is limited and might not display the whole content if the content is large, in that case, console.log() function can be used(commented in the code), it will print the same in the console.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.