JavaScript: Change CSS

By Xah Lee. Date: . Last updated: .

Press the following buttons to change the color.

Color Me

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 JavaScript: Get Element by ID, Name, Class etc] .

JavaScript/DOM, Change CSS

BUY Ξ£JS JavaScript in Depth

DOM Common Examples