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:
Method 1: Set Style With JavaScript Using “Inline” Styling
For applying any styling on a single element, use the following approaches:
Example 1: Inline Styling Using “style” Attribute
First, add some content on the page:
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:
Change the color of the text using the “style” attribute:
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:
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:
<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:
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”:
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:
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.