JS

DYNAMICALLY LOAD & REPLACE CSS

(quick guide & examples)

CREATE LINK TAG var ss = document.createElement("link");  ss.rel = "stylesheet"; ss.type = "text/css"; ss.href = "STYLE.CSS";

CREATE LINK TAG

01

INSERT INTO HEAD document.head.appendChild(ss);

CREATE CSS STYLESHEET

02

let ss = new CSSStyleSheet(); ss.insertRule("#demo { color: red; font-weight: 700; }"); document.adoptedStyleSheets = [ss];

REPLACE CSS RULES

03

CSS RULES  <style>#demo { color: blue; }</style>

DELETE & INSERT NEW RULE let ss = document.styleSheets[0]; ss.deleteRule(0); ss.insertRule("#demo { color: red; font-weight: 700; }");

CSS VARIABLES

04

DEFINE CSS VARS :root { --demo-color: black; }

JS REPLACE CSS VARS document.documentElement.style.setProperty("--demo-color", "red");

USE CSS VARS #demo { color: var(--demo-color); }