JavaScript: 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:

{
  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 Get Elements by ID/Name/Class etc] .