JavaScript HTML DOM - Changing CSS

❮ Previous Next ❯

JavaScript can modify the appearance of HTML elements using the HTML DOM.

Changing HTML Style

To modify how an HTML element looks, follow this syntax:

document.getElementById(id).style.property = new style

In this example, the style of a

element is modified.

Using Events

The HTML DOM lets you run code when something happens on a webpage.

The browser creates events when "things happen" to HTML elements.

A click occurs on an element.
The webpage is ready.
Input fields have been modified.

In the upcoming chapter of this tutorial, you'll gain additional insights into events.

This example modifies the appearance of the HTML element identified as id="id1" when the user clicks a button.

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript HTML DOM</h2>
    <p>Changing the HTML style:</p>
    <p id="p1">Hello World!</p>
    <p id="p2">Hello World!</p>
    <script>
      document.getElementById("p2").style.color = "blue";
      document.getElementById("p2").style.fontFamily = "Arial";
      document.getElementById("p2").style.fontSize = "larger";
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1 id="id1">My Heading 1</h1>
    <button type="button" onclick="document.getElementById('id1').style.color = 'red'"> Click Me!</button>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

JavaScript HTML DOM - Changing CSS

Changing HTML Style

Using Events

Web Development