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= <link href= 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>neveropen</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:
How to read CSS rule values with JavaScript?
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= <link href= 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>neveropen</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:
How to read CSS rule values with JavaScript?
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.
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
