How to read CSS rule values with JavaScript?

Last Updated : 29 Jul, 2024

DOM (Document Object Model) object can read and manipulate CSS rules. We can use the following approaches to read all the Embedded CSS rules using JavaScript.

Using getElementsByTagName() Method
Using window.getComputedStyle() Method

Approach 1: Using the getElementsByTagName() Method

Use document.getElementsByTagName("STYLE") method and get all the CSS tags.
Check if the length is 0 then 'no style tag used'.
Else, display all the tags using for loop.

Example:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href=
"https://fonts.googleapis.com/css?family=Satisfy&display=swap" 
        rel="stylesheet">

    <title>
        How to read CSS rule values with JavaScript?
    </title>

    <style>
        h1 {
            text-align: center;
            color: green;
        }

        #para {
            font-family: 'Satisfy', cursive;
            text-align: justify;
            background-color: powderblue;
            font-size: 130%;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <hr />

    <p id="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>

    <script>
        function alert_css() {
            let style_text = "";

            let style_elements = 
                document.getElementsByTagName("STYLE");

            if (style_elements.length == 0)
                alert("No Style Tag!");
            else {
                for (let 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);
            }
        }

        document.getElementById("my_button1")
            .onclick = alert_css;
    </script>
</body>

</html>

Output:

Approach 2: Using window.getComputedStyle() Method

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:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href=
"https://fonts.googleapis.com/css?family=Satisfy&display=swap" 
        rel="stylesheet">

    <title>
        How to read CSS rule values with JavaScript?
    </title>

    <style>
        h1 {
            text-align: center;
            color: green;
        }

        #para {
            font-family: 'Satisfy', cursive;
            text-align: justify;
            background-color: powderblue;
            font-size: 130%;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <hr />

    <p id="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>
    
    <script>
        function append_css(div_name, id_name) {
            let elem = document.getElementById(id_name);
            let txt = "";
            let cssObj = window.getComputedStyle(elem, null);

            for (let 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", "para");
            }, false);
    </script>
</body>

</html>

Output:

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.

How to read CSS rule values with JavaScript?

shubhamr238

Improve

Article Tags :

How to read CSS rule values with JavaScript?

Approach 1: Using the getElementsByTagName() Method

Approach 2: Using window.getComputedStyle() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?