How to Set Style Using Pure JavaScript

When the developers need to add animation or change the style of any element based on user interactions or other dynamic events on the web page, it can be more efficient to use JavaScript to update the styles rather than using CSS. JavaScript can create animations that would be difficult or impossible to achieve with CSS alone.

This tutorial will describe the process of styling the page using JavaScript.

How to Set Style Using Pure JavaScript?

To style a web page using JavaScript, use the following approaches:

Inline Styling
Global Styling

Method 1: Set Style With JavaScript Using “Inline” Styling

For applying any styling on a single element, use the following approaches:

style attribute
setAttribute() method

Example 1: Inline Styling Using “style” Attribute

First, add some content on the page:

<p id="text">Style me using Inline Styling in JavaScript</p>

The web page before styling now looks like as follows:

Now, style the text using JavaScript. First, get the text’s reference where we want to add some styling using the “getElementById()” method:

let text = document.getElementById("text");

Change the color of the text using the “style” attribute:

text.style.color = "red";

As you can see that the text is now in red:

Example 2: Inline Styling Using “setAttribute()” Method

Here, we will use the “setAttribute()” method where, we will change the color and the background color of the text, and set the text in the bold style:

text.setAttribute("style", "background-color: grey; color: yellow; font: bold;");

It can be observed that the color, background color, and font style has been successfully implemented on the text:

Method 2: Set Style With JavaScript Using “Global” Styling

If you want to add the same styling on the different elements, use the “global styling” technique. It sets styles on multiple elements at once by using the “getElementsByClassName()”, “getElementsByTagName(),” or “querySelectorAll()” methods.

Example

In HTML file, add some text on the page:

<h4 class="sec">Style Using JavaScript</h4>
<p class="text">Style me using Global Styling in JavaScript</p>
<p class="text">Style me using Global Styling in JavaScript</p>
<p>Body Content</p>

Output

Now, style the page using the global styling approach. First, add some styling for the <body> tag using the “querySelector()” method. Here, we will change the background color, font family, and text color and set the body’s padding and margin to ‘0’ using the “style” attribute:

const body = document.querySelector("body");
body.style.backgroundColor = "lightblue";
body.style.fontFamily = "Arial, sans-serif";
body.style.color = "white";
body.style.margin = "0";
body.style.padding = "0";

As you can see, all the given styling has been successfully implemented on the web page:

Now, we will change the color of the heading and move it downward by applying “marginTop”:

const h4 = document.querySelector("h4");
h4.style.color = "black";
h4.style.marginTop = "50px";

You can see that the heading is moving a little downward, and the color is change to “black”:

Now, change the text color of the specified text that contains the “text” class using the “querySelectorAll()” method:

let elements = document.querySelectorAll('.text');
elements.forEach(function(elem) {
elem.style.color = "blue";
});

Output

That was all about styling using pure JavaScript.

Conclusion

To style a web page using JavaScript, use the “Inline styling” or the “Global Styling” with the help of the “style” attribute, “setAttribute()” method, “getElementsByClassName()”, “getElementsByTagName()” or “querySelectorAll()” methods. Inline styling is used to style a single element, while multiple elements use the global styling approach for styling. This tutorial described the process of styling the page using JavaScript.

How to Set Style Using Pure JavaScript