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

Last Updated : 13 Dec, 2023

The CSS of an element can be obtained using the getComputedStyle element function in JavaScript. It returns a JavaScript object containing CSS properties and their values. This object is indexed and iterable over the property names. The getPropertyValue(property) is used to get the value of a property.

In the below code, passing your element object to the getCSS( element ) gets all the properties using getComputedStyle(element) and getPropertyValue(property) and writing them in a separate division. You can scroll through the results to see all the properties.

Example 1: The following example demonstrates getting all properties of <div> element with id=’srcDiv’.

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>
    <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>
</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>
</body>
</html>

Output:

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

Example 2: Below is an example to obtain the property of an <input> element with id=’inputTxt’.

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>
 
    <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>
</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>
</body>
 
</html>