DOM - CSS Stylesheets and CSS Rules

16 Dec 2020 in Dev on CSS, Dom

Using cssRules to Get a List of CSS Rules in a Stylesheet

<!-- CSS -->
<style id="styleElement"> 
body{background-color:#fff;margin:20px;} 
p{line-height:1.4em; color:blue;} 
</style>

var sSheet = document.querySelector('#styleElement').sheet;
/* arraylike list containing all of the CSSrule objects representing each CSS rule in the stylesheet */
console.log(sSheet.cssRules);
console.log(sSheet.cssRules.length); 
//logs 2
//rules are indexed in a CSSRules list starting at a 0 index 
console.log(sSheet.cssRules[0]); 
//logs first rule 
console.log(sSheet.cssRules[1]); 
//logs second rule

Using insertRule() and deleteRule() to Insert and Delete CSS Rules in a Stylesheet

<style id="styleElement">
p{line-height:1.4em; color:blue;} /* index 0 */ 
p{font-size:50px;} /* index 1 */
</style>

<p>Hi</p>

//add a new CSS rule at index 1 in the inline stylesheet
document.querySelector('#styleElement').sheet.insertRule('p{color:red}',1); 
//verify it was added
console.log(document.querySelector('#styleElement').sheet.cssRules[1].cssText);

//Delete what we just added
document.querySelector('#styleElement').sheet.deleteRule(1);
//verify it was removed
console.log(document.querySelector('#styleElement').sheet.cssRules[1].cssText);

Using the .style Property to Edit the Value of a CSSStyleRule

<style id="styleElement"> 
p{color:blue;} strong{color:green;} </style>

<p>Hey <strong>Dude!</strong></p>

var styleSheet = document.querySelector('#styleElement').sheet;

//Set css rules in stylesheet
styleSheet.cssRules[0].style.color = 'red'; 
styleSheet.cssRules[1].style.color = 'purple';

//Get css rules
console.log(styleSheet.cssRules[0].style.color); //'red' 
console.log(styleSheet.cssRules[1].style.color); //'purple'

Creating a New Inline CSS Stylesheet

<p>Hey <strong>Dude!</strong></p>

var styleElm = document.createElement('style'); 
styleElm.innerHTML = 'body{color:red}';
//notice markup in the document changed to red from our new inline stylesheet
document.querySelector('head').appendChild(styleElm);

Programmatically Adding External Stylesheets to an HTML Document

//create and add attributes to <link>
var linkElm = document.createElement('link'); 
linkElm.setAttribute('rel', 'stylesheet'); 
linkElm.setAttribute('type', 'text/css'); 
linkElm.setAttribute('id', 'linkElement'); 
linkElm.setAttribute('href','http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css');

//Append to the DOM
document.head.appendChild(linkElm);

//confirm its addition to the DOM
console.log(document.querySelector('#linkElement'));
// <link rel="stylesheet" type="text/css" id="linkElement" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">

Using the .disabled Property to Disable/Enable Stylesheets

<link id="linkElement" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" rel="stylesheet" type="text/css">
<style id="styleElement"> body{color:red;}

//Get current boolean disabled value 
console.log(document.querySelector('#linkElement').disabled); 
//log 'false' 
console.log(document.querySelector('#styleElement').disabled); 
//log 'false'

//Set disabled value, which of course disables all styles for this document
document.document.querySelector('#linkElement').disabled = true; 
document.document.querySelector('#styleElement').disabled = true;

CSS Stylesheet Overview