JavaScript: Change CSS

By Xah Lee. Date: . Last updated: .

Press the following buttons to change the color.

Color Me

Here is the HTML code:

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

Here is the JavaScript code:

  const x972 = document.getElementById("x972");
  const b1 = document.getElementById("b1");
  const b2 = document.getElementById("b2");

  b1.addEventListener("click", () => ( = "red"), false);
  b2.addEventListener("click", () => ( = "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] .

JavaScript/DOM, Change CSS

JavaScript in Depth

DOM Common Examples

DOM Scripting


DOM Methods

Basic Examples

HTML Input

Web Scripting Examples

Web Scripting Misc