HTML DOM changes CSS

May 06, 2021 JavaScript

1. JavaScript HTML DOM - Change CSS

2. Change the HTML style

3. More instances

4. Refer to the article

JavaScript HTML DOM - Change CSS

HTML DOM allows JavaScript to change the style of HTML elements.

Change the HTML style

To change the style of HTML elements, use this syntax:

document.getElementById( id ).style. property = new style

The following example changes the style of the element:

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

This example changes the style of the HTML element of id"id1" when the user clicks the 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>

Try it out . . .

More instances

Visibility
How to make elements invisible. Do you want elements to appear or disappear?

Refer to the article

JavaScript and HTML Reference Manual: Style Objects

HTML DOM changes CSS

Table of contents

JavaScript HTML DOM - Change CSS

Change the HTML style

More instances

Refer to the article

Cookie Consent