JS: Change CSS

Press the following buttons to change the color.

Color Me RED BLUE

Here is the HTML code:

<p>
<span id="x972">Color Me</span>
<button id="b1" type="button">RED</button>
<button id="b2" type="button">BLUE</button>
</p>

Here is the JavaScript code:

"use strict";
{
  const x972 = document.getElementById("x972");
  const b1 = document.getElementById("b1");
  const b2 = document.getElementById("b2");
  b1.addEventListener("click", () => {
    x972.style.color = "red";
  }, false);
  b2.addEventListener("click", () => {
    x972.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 JS: Get Element by ID, Name, Class etc〕 .