View Categories

DOM CSS

1 min read

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 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.

Powered by BetterDocs

Leave a Reply