JavaScript Changing CSS Tutorial

JavaScript – Changing CSS

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: 1

The following example changes the style of a

element:

Change CSS 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

This example changes the style of the HTML element <p> with id=”demo” when the user clicks a button: