How to get all CSS styles that are applied directly to an element using JavaScript ?

Last Updated : 19 Sep, 2024

In JavaScript, the getComputedStyle() function allows us to retrieve the CSS properties applied to a particular HTML element. This function returns an object that contains all the computed styles, including values from external stylesheets, inline styles, and browser defaults. Using the getPropertyValue(property) method, you can extract specific property values.

Below are two examples demonstrating how to use getComputedStyle() to obtain and display the CSS properties of different HTML elements.

Example 1: Getting All CSS Properties of a <div> Element

This example demonstrates how to retrieve all the CSS properties of a <div> element and display them in another <div> container.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #srcDiv {
            width: 450px;
            font-family: sans-serif;
            text-align: justify;
            justify-content: center;
            color: green;
        }

        #resDiv {
            height: 300px;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <img src="logo.png" /><br />

    <h3>
        How to get all the
        CSS of an element
    </h3>
    <br />

    <div id="srcDiv">
        This is a demo paragraph for
        explaining "How to get all the
        CSS of an element". Properties
        which are applied on this
        division will appear in the
        next division on pressing the
        button below.
    </div>
    <br /><br />

    <button onclick="getCSS(document
            .getElementById('srcDiv'))">
        Get CSS
    </button>
    <br /><br />

    <div id="resDiv"></div>
  <script>
        function getCSS(element) {
            let css_data = '';
            let css_obj = getComputedStyle(element);

            for (let i = 0; i < css_obj.length; i++) {
                css_data +=
                    css_obj[i] + ':' +
                    css_obj.getPropertyValue(css_obj[i])
                    + ';<br>';
            }
            document.getElementById('resDiv')
                .innerHTML = css_data;
            return;
        }
    </script>
</body>
</html>

Explanation:

HTML Structure: A <div> element (id="srcDiv") is styled with some CSS, and a button triggers the getCSS() function to retrieve the CSS properties.
getComputedStyle(): This method retrieves the computed styles of the element passed as an argument.
getPropertyValue(): Inside the loop, this method is used to get the value of each property and display it inside the <div> with id="cssOutput".

Output:

Example 2: Getting Specific CSS Properties of an <input> Element

In this example, we obtain the CSS property values of an <input> element when a button is clicked.

HTML

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

<head>
    <style>
        #srcDiv {
            width: 450px;
            font-family: sans-serif;
            text-align: justify;
            justify-content: center;
            color: green;
        }

        #inputTxt {
            color: red;
        }

        #resDiv {
            height: 300px;
            width: 600px;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <img src="logo.png" /><br />

    <h3>
        How to get all the
        CSS of an element
    </h3>

    <div id="srcDiv">
        This is a demo paragraph for explaining
        "How to get all the CSS of an element".
        Properties which are applied on the input
        field will appear in the next division on
        pressing the button below.
    </div>
    <br />

    <input id="inputTxt" type="number" 
    placeholder="Input Number" />

    <button onclick="getCSS(document
            .getElementById('inputTxt'))">
        Get Input CSS
    </button>
    <br /><br />

    <div id="resDiv"></div>
    <script>
        function getCSS(element) {
            let css_data = '';
            let css_obj = getComputedStyle(element);
            for (let i = 0; i < css_obj.length; i++) {
                css_data +=
                    css_obj[i] + ':' + css_obj
                        .getPropertyValue(css_obj[i])
                    + ';<br>';
            }
            document.getElementById('resDiv')
                .innerHTML = css_data;
            return;
        }
    </script>
</body>

</html>

Explanation:

HTML Structure: An <input> element (id="inputTxt") is styled with specific CSS. A button triggers the getInputCSS() function to retrieve specific CSS properties like width, height, font-size, and border.
getComputedStyle(): Used to get the computed CSS styles of the input element.
getPropertyValue(): Retrieves specific CSS properties of the input element and displays them in a separate output container.

Output: On clicking the 'Get Input CSS' button, the following output shows.

Note: Please note that the object being passed into the getCSS() function in each example.

How to change style attribute of an element dynamically using JavaScript ?

chitrankmishra

Improve

Article Tags :

How to get all CSS styles that are applied directly to an element using JavaScript ?

Example 1: Getting All CSS Properties of a <div> Element

Explanation:

Example 2: Getting Specific CSS Properties of an <input> Element

Explanation:

Similar Reads

Thank You!

What kind of Experience do you want to share?