JavaScript HTML DOM Changing CSS

## JS Basic

JS HOME JS Introduction JS How To JS Output JS Statements JS Comments JS Variables JS Data Types JS Objects JS Functions JS Operators JS Comparisons JS Conditions JS Switch JS Loop For JS Loop While JS Breaks JS Errors JS Validation

## JS Advanced

JS Object JS Number JS String JS Date JS Array JS Boolean JS Math JS RegExp

## JS HTML DOM

DOM Intro DOM Methods DOM Document DOM Elements DOM HTML DOM CSS DOM Events DOM Navigation DOM Nodes DOM Nodelist

## JS Browser BOM

JS Window JS Screen JS Location JS History JS Navigator JS PopupAlert JS Timing JS Cookies

## JS Libraries

JS Libraries JS jQuery JS Prototype

## JS Examples

JS Basic Examples JS Objects Examples JS DOM Examples JS HTML Examples JS Browser Examples JS Quiz JS Certificate JS Summary

## JS References

Javascript Objects HTML DOM Objects

# JavaScript HTML DOM - Changing CSS

« Previous
Next Chapter »

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 <p> 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>
Try it yourself »

## 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>
Try it yourself »

## More Examples

Visibility How to make an element invisible. Do you want the element to show or not?

## HTML DOM Style Object Reference

For all HTML DOM style properties, look at our complete HTML DOM Style Object Reference.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE