How to read CSS rule values with JavaScript? Last Updated : 29 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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() MethodUsing window.getComputedStyle() MethodApproach 1: Using the getElementsByTagName() MethodUse 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= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link href= "https://fonts.googleapis.com/css?family=Satisfy&display=swap" 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>GeeksforGeeks</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: Approach 2: Using window.getComputedStyle() MethodGet 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= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link href= "https://fonts.googleapis.com/css?family=Satisfy&display=swap" 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>GeeksforGeeks</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: 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. Comment More infoAdvertise with us Next Article How to read CSS rule values with JavaScript? shubhamr238 Follow Improve Article Tags : Technical Scripter JavaScript Web Technologies JavaScript-Questions Similar Reads How to remove CSS property using JavaScript? To remove CSS property using JavaScript, we have different methods. In this article, we will learn how to remove CSS property using JavaScript. Below are the Methods used to remove CSS property using JavaScript: Table of Content Using CSS removePropertyUsing the setProperty methodMethod 1: Using CSS 2 min read How to load CSS files using JavaScript? The CSS file is used to describe how HTML elements will be displayed. There are various ways to add CSS files to the HTML document. JavaScript can also be used to load a CSS file in the HTML document. Approach:Use the document.getElementsByTagName() method to get HTML head element.Create a new link 2 min read How to Get Current Value of a CSS Property in JavaScript ? In this article, we will see how to get the current value of a CSS property using JavaScript. Below are the approaches used to Get Current Value of a CSS Property in JavaScript: Table of Content Inline StyleUsing the getComputedStyle() methodApproach 1: Inline StyleInline styles are styles that are 3 min read How to add CSS Rules to the Stylesheet using JavaScript ? In this example, we will see how to add CSS rules to the stylesheet element using JavaScript. First, we will create an HTML document and then add some CSS rules using JavaScript. Syntax: let styleText = document.getElementById('GFG').sheet; let st = `.box { width: 100px; height: 100px; }`; styleText 2 min read How to change style/class of an element using JavaScript ? In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com 4 min read How to Change CSS Properties using JavaScript EventListner Methods ? In this article, we will be using JavaScript to update the web page's CSS styling by taking input from the user. Generally, we have seen a few webpages update the various styling properties dynamically by taking the user input that enhances the user interaction with the webpage, along with improving 3 min read How to Access Tailwind Colors from JavaScript ? Tailwind CSS is a "Utility first CSS framework". The feature that makes Tailwind has a variety of classes and provides a huge set of predefined colors that can be used in our stylesheets without the need to define them manually. These predefined colors are categorized into different color palettes w 4 min read Manipulating HTML Elements with JavaScript JavaScript is a powerful language that can be used to manipulate the HTML elements on a web page. By using JavaScript, we can access the HTML elements and modify their attributes, styles, and content. This allows us to create dynamic and interactive web pages. Methods to Identify the elements to man 5 min read How to Select and Manipulate CSS pseudo-elements using JavaScript / jQuery ? In this article, we will learn how to select and manipulate CSS pseudo-elements using JavaScript (or jQuery). CSS pseudo-elements allow developers to style and enhance specific parts of an HTML document with the help of selectors like::before and::after, which provide the flexibility to add decorati 2 min read How to set the color of an element border with JavaScript ? In this article, we will see how to set the color of an element's border with JavaScript. To set the color of an element's border with JavaScript, we can use the element's style property. Method 1: First, we will create a text element and then apply some CSS styles including the border color of the 2 min read Like