Dynamic Stylesheets in JS

You CAN affect the document’s stylesheets in JS… a couple of ways, actually.

To manipulate global CSS (non-element CSS) using JavaScript, you can create a <style> tag like any other HTML element. From there you’ve got a couple options for applying the styling.

1. Set innerHTML

   var style = document.createElement('style');
   style.innerHTML = `
   #app {
   background-color: blueviolet;
   }
   `;
   document.head.appendChild(style);

2. Or use a method of the CSSStyleSheet class.

   var style = document.createElement('style');
   document.head.appendChild(style);
   style.sheet.insertRule('#app {background-color: darkseagreen}');
    
   //STYLESHEET MANIPULATION Option 2

---

Source §

CSSStyleSheet - Web APIs | MDN

Set CSS styles with javascript

Related §

• Code References