Categories
JavaScript Web development

JavaScript HTML DOM/CSS

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

JavaScript HTML DOM CSS

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 <p> element:

<!DOCTYPE html>
<html>
<body>

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

<script>
document.getElementById("p2").style.color = "green";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>

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

</body>
</html>

Output:

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:

  1. An element is clicked on
  2. The page has loaded
  3. 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:

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'yellow'">
Click Me!</button>

</body>
</html>

Output:

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *