JavaScript

How to Change HTML Style Through JavaScript

HTML DOM acronym for Document Object Model is  a programming interface for documents written in HTML and XML. It provides a logical structure to the documents. HTML DOM defines how HTML documents can be evaluated and changed. Using HTML DOM you can alter the style of HTML elements through JavaScript.

The style property of HTML DOM is used for the purpose of changing the style of HTML elements.

Style Property of HTML DOM

A style attribute of an HTML element is represented by a CSSStyleDeclaration object. In order to return this CSSStyleDeclaration object, the style property is used. This property is used to either get or set the style of elements using various CSS properties.

Syntax

Syntax of the HTML DOM style property is given as follows.

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

If you simply want to get a style property, use the following syntax.

element.style.property

However if you want to set a style property, use the given syntax

element.style.property= value

Now that we have a basic understanding of what HTML DOM style property is. We will now explore some relevant examples.

Changing HTML style

The given examples demonstrate how we can change style of HTML elements using JavaScript.

Example 1
Suppose, you want to change the color of <p>  element using its id.

<!DOCTYPE html>
<html>
<body>
    <p id="para1">HTML DOM Style Property</p>
    <p id="para2">HTML DOM Style Property</p>
    <script>
    document.getElementById("para2").style.color = "red";
    </script>
</body>
</html>

In the above example, we first simply defined two <p> elements and assigned them a unique id.

<p id="para1">HTML DOM Style Property</p>
<p id="para2">HTML DOM Style Property</p>

We then changed the color of <p> element with id=”para2″. In the following piece of code where we’re simply getting our desired element by its id and changing its color to red.

<script>
document.getElementById("para2").style.color = "red";
</script>

Here is how it looked before changing the color.

After changing the color.

Example 2
Suppose, you want to change the color as well as the font-family of <h1>  element using its id.

<!DOCTYPE html>
<html>
<body>
    <h1 id="head1">Learning HTML DOM</h1>
    <h1 id="head2">Learning HTML DOM</h1>
    <script>
    document.getElementById("head2").style.color = "blue";
    document.getElementById("head2").style.fontFamily = "Arial";
    </script>
</body>
</html>

In the above example, we first simply defined two <h1> elements and assigned them a unique id.

<h1 id="head1">Learning HTML DOM</h1>
<h1 id="head2">Learning HTML DOM</h1>

We then changed the color and the font family  of <h1> element with id=”head2″. In the following piece of code where we’re simply getting our desired element by its id and changing its color to blue and font family to arial.


GeSHi Error: GeSHi could not find the language jacascript (using path /home/nginx/domains/linuxhint.com/public/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Here is how it looked before changing the color and the font family.

After changing the color and font family it looks like this.

Conclusion

To alter the style of HTML elements using JavaScript we use the HTML DOM style property. The HTML DOM style property allows you to get or set the style of an HTML element. There can be different approaches to use this property in order to alter the style of HTML elements. This tutorial covers HTML DOM style property and different approaches that can be used to change the style of HTML elements.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.