JS Tutorial
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 ValidationJS HTML DOM
DOM Intro DOM HTML DOM CSS DOM Events DOM NodesJS Objects
JS Object JS Number JS String JS Date JS Array JS Boolean JS Math JS RegExpJS Window
JS Window JS Screen JS Location JS History JS Navigator JS PopupAlert JS Timing JS CookiesJS Libraries
JS Libraries JS jQuery JS PrototypeJS Examples
JS Examples JS Objects Examples JS Browser Examples JS DOM Examples JS Quiz JS Certificate JS SummaryJS References
JavaScript Objects HTML DOM ObjectsJavaScript HTML DOM - Changing CSS
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>
<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 »
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>
<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.
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
