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

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.
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.