---
title: DOM CSS
description: "> The HTML DOM allows JavaScript to change the style of HTML elements. --- ## Changing HTML Style To change the style of an HTML element, use this syntax: document.getElementById(*id*).style.*property *=* new style* The following example changes the style of a ``  element:…"
url: "https://apprentice.mn/docs/dom-css/"
updated: "2021-05-19"
category: Javascript
---

# DOM CSS

> The HTML DOM allows JavaScript to change the style of HTML elements.

---

## Changing HTML Style

To change the style of an HTML element, use this syntax:

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

The following example changes the style of a ``

 element:

### Example

     `<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>`

## Using Events

The HTML DOM allows you to execute code when an event occurs.

Events are generated by the browser when “things happen” to HTML elements:

- An element is clicked on
- The page has loaded
- Input fields are changed

You will learn more about events in the next chapter of this tutorial.

This example changes the style of the HTML element with `id="id1"`, when the user clicks a button:

### Example

      `<!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>`

## More Examples

[Visibility](https://www.w3schools.com/js/tryit.asp?filename=tryjs_visibility) How to make an element invisible. Do you want to show the element or not?

---

## HTML DOM Style Object Reference

For all HTML DOM style properties, look at our complete HTML DOM Style Object Reference.

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-css%2F&linkname=DOM%20CSS](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-css%2F&linkname=DOM%20CSS)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-css%2F&linkname=DOM%20CSS](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-css%2F&linkname=DOM%20CSS)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-css%2F&linkname=DOM%20CSS](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fdom-css%2F&linkname=DOM%20CSS)[https://www.addtoany.com/share](https://www.addtoany.com/share)