Loading lesson path
Concept visual
Start at both ends
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
<p> element: <html> <body> <p id="p2">Hello World!</p> <script>
document.getElementById("p2").style.color = "blue";</script> </body> </html>
The HTML DOM allows you to execute code when an event occurs. Events are generated by the browser when "things happen" to HTML elements:
You will learn more about events in the next chapter of this tutorial.
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>
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>
For all HTML DOM style properties, look at our complete HTML DOM Style Object Reference.