Skip to content
Related Articles

Related Articles

How to get all CSS styles that are applied directly to an element using JavaScript ?
  • Last Updated : 15 Jul, 2020

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 write them in a separate division. You can scroll 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>
  
<head>
    <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) {
            var css_data = '';
            var css_obj = getComputedStyle(element);
  
            for (var 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: On clicking the ‘Get CSS’ button, the output shows.

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

HTML




<!DOCTYPE html>
<html>
  
<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) {
            var css_data = '';
            var css_obj = getComputedStyle(element);
            for (var 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>

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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :