CSS JS

HOW TO CHANGE & OVERRIDE CSS IN JAVASCRIPT

<p id="demoA">Hello</p>   document.getElementById("demoA") .style.color = "Red";

SET CSS INLINE STYLE

01

<p id="demoB">Hello</p>   document.getElementById("demoB") .style.cssText = "color: red; font-weight: bold;";

SET CSS TEXT

02

<p id="demoC">Hello</p>   document.getElementById("demoC") .setAttribute ("style", "color: red; font-weight: bold;");

SET STYLE ATTRIBUTE

03

.demo { color: red; } <p id="demoD">Hello</p>   document.getElementById("demoD") .className = "demo";

SET CSS CLASS

04

:root { --textcol: red; } .demo { color: var(--textcol); } <p class="demo">Hello</p>   document.documentElement.style. setProperty ("--textcol", "blue");

SET CSS VARIABLE

05