JavaScript: Change CSS
Press the following buttons to change the color.
Color Me
Here is the HTML code:
<p> <span id="dz6Cs">Color Me</span> <button id="b1" type="button">RED</button> <button id="b2" type="button">BLUE</button> </p>
Here is the JavaScript code:
{ const dz6Cs = document.getElementById("dz6Cs"); const b1 = document.getElementById("b1"); const b2 = document.getElementById("b2"); b1.addEventListener("click", () => (dz6Cs.style.color = "red"), false); b2.addEventListener("click", () => (dz6Cs.style.color = "blue"), false); }
This technique can be used to change the CSS value for any HTML element.
All you need to do is to give the HTML tag a id attribute id=name
, and define in JavaScript when should the change happen.
You can also get the element by class or tag name, if you don't have a id attribute. [see Get Elements by ID/Name/Class etc] .