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 styleThe following example changes the style of a <p> element:
<!DOCTYPE html>
<html>
<body>
<p id="p-one">Hello World!</p>
<p id="p=two">Hello World!</p>
<script>
document.getElementById("p-two").style.color = "#f4a261";
document.getElementById("p-two").style.fontFamily = "Arial";
document.getElementById("p-two").style.fontSize = "larger";
</script>
</body>
</html>Output:
Hello World!
Hello World!
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=”change” when the user clicks a button:
<!DOCTYPE html>
<html>
<body>
<h3 id="change">This is a heading.</h3>
<button type="button"
onclick="document.getElementById('change').style.color = '#e76f51'">
Click Me!</button>
</body>
</html>
Output:
This is a heading.
Enjoy coding!
Read also:
How to add JavaScript to HTML?