In this article, we will discuss the CSSStyleSheet cssRules property, along with understanding their basic implementation with the help of suitable examples.
The cssRules is a read-only property for a document that returns the SytleSheetList of the CSSStyleSheet object, which is explicitly linked to the stylesheets or embedded into the document. It returns ith stylesheet of the document.
Syntax:
let stylesheet = document.styleSheets[i]; let styleRules = stylesheet.cssRules;
Note: Here i = 0, 1, 2, 3, 4, … that is indicating the ith no. of stylesheet attached to the document.
Return Value: It returns an Array-like object, where each CSS style rules are an element of the array and every index CSS style rule has some set of properties wrapped inside an object. You can access the CSS style rules using index values like 0,1,2,3…etc.
The styleSheets.cssRules property is helpful in getting the stylesheets attached to the document and getting and updating the CSS rules of the stylesheets. These methods also help in updating CSS rules in the stylesheet related to an individual HTML element.
Example 1: In this example, we have created an HTML document. The document contains h2, h3, button, and div elements. The button will display the CSS style rules inside the console.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> h2 { color: green; } h3 { color: blue; } #container { width: 400px; height: auto; font-size: 12px; font-weight: 200; border: 1px solid green; padding: 10px; } </style> </head> <body> <h2>neveropen</h2> <h3>document.styleSheets.cssRules</h3> <div id="container"> A Computer Science portal for neveropen. It contains well written, well thought and well explained computer science and programming articles. </div> <br> <button onclick="GetCSSRules()"> GetCSSRules </button> <script> const GetCSSRules = () => { let style_sheet = document.styleSheets[0]; let CSS_Rules = style_sheet.cssRules; console.log(CSS_Rules); } </script> </body> </html> |
Output: The console output contains the CSS style rules object, where each element is the CSS style rule item and corresponding CSS properties are the rules.
document.styleSheets.cssRules
Example 2: In this example, we updated the text color and font weight of the text of the div element by updating the CSS style rules.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> h2 { color: green; } h3 { color: blue; } #container { width: 400px; height: auto; font-size: 12px; font-weight: 200; border: 1px solid green; padding: 10px; } </style> </head> <body> <h2>neveropen</h2> <h3> document.styleSheets.cssRules </h3> <div id="container"> A Computer Science portal for neveropen. It contains well written, well thought and well explained computer science and programming articles. </div> <br> <button onclick="GetCSSRules()"> GetCSSRules </button> <script> const GetCSSRules = () => { let style_sheet = document.styleSheets[0]; let Div_CSS_Rules = style_sheet.cssRules[2]; Div_CSS_Rules.style.color = 'crimson'; Div_CSS_Rules.style.fontWeight = '900'; } </script> </body> </html> |
Output:
document.styleSheets.cssRules
Example 3: In this example, we have inserted a new style CSS rule text-decoration: underline into the style sheet at index 2 using the following method.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> h2 { color: green; } h3 { color: blue; } #container { width: 400px; height: auto; font-size: 12px; font-weight: 200; border: 1px solid green; padding: 10px; } </style> </head> <body> <h2>neveropen</h2> <h3> document.styleSheets.cssRules </h3> <div id="container"> A Computer Science portal for neveropen. It contains well written, well thought and well explained computer science and programming articles. </div> <br> <button onclick="InsertCSSRules()"> InsertCSSRules </button> <script> const InsertCSSRules = () => { let style_sheet = document.styleSheets[0]; style_sheet.insertRule( "#container{text-decoration:underline;}", 2); } </script> </body> </html> |
Output:
document.styleSheets.cssRules
