HTML DOM - Changing CSS
Changing HTML Style
The HTML DOM allows JavaScript to change the style of HTML elements.
To change the style of an HTML element, use this syntax:
document.getElementById(id).style.property= new style
Example
Changes the style of a <p> element:
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Try it Yourself »
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.
Example
Change the style of the HTML element with id="id1", when the
user clicks a button:
<!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>
Try it Yourself »
More Examples
Example
How to make an element invisible. Do you want to show the element or not?
<input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'">
Click Me!</button>
</body>
</html>
Try it Yourself »
HTML DOM Style Object Reference
For all HTML DOM style properties, look at our complete HTML DOM Style Object Reference.
