How do You Add CSS With JavaScript

There are various scenarios when programmers need to style the page using JavaScript. For instance, dynamically changing the style of the elements on user interactions including showing different animations or styles on focus or hovering on any text, and so on. For dynamic styling, the use of CSS styling in JavaScript is more efficient. It provides a flexible and dynamic way to manage styles and make applications more user-friendly.

This article will describe the methods to add CSS with JavaScript.

How to Add CSS With JavaScript?

In JavaScript, you can add CSS styles to an element by modifying its style property using the following methods or approaches:

style Property as inline styling
setAttribute() Method as inline styling
createElement() Method as a global styling

Method 1: Add CSS With JavaScript Using the “style” Property

For adding CSS in JavaScript, use the “style” property. It is utilized to access and manipulate the inline styles of an element. It gives an object that represents the inline styles of an element and allows one to get or set individual style properties.

Syntax
For adding CSS style in JavaScript, the following syntax is utilized for the “style” property:

element.style;

Here, “element” is a reference to an HTML element.

Example
In the following example, we will style the buttons using JavaScript. Firstly, we will create three buttons and assign ids to them, which helps to access the button elements for styling:

<button id="btn1">Agree</button>
<button id="btn2">Reject</button>
<button id="btn3">Accept</button>

Before styling the output will look like this:

Now, let’s style these buttons in JavaScript using the “style” property. First, get all the button elements using their assigned ids with the help of the “getElementById()” method:

let agree = document.getElementById("btn1");
let reject = document.getElementById("btn2");
let accept = document.getElementById("btn3");

Set the background colors of all these buttons using the “style” property:

agree.style.backgroundColor = "green";
reject.style.backgroundColor = "red";
accept.style.backgroundColor = "yellow";

As you can see, the buttons have been successfully styled using the “style” property:

Method 2: Add CSS With JavaScript Using “setAttribute()” Method

To add CSS styling in JavaScript, use the “setAttribute()” method. It is used to set or add an attribute and its value to an HTML element.

Syntax
The following syntax is utilized for the “setAttribute()” method:

element.setAttribute(attribute, value);

Example
Here, we will set the different styles on the buttons in JavaScript using the “setAttribute()” method. Set the border radius of all buttons to “.5rem”, and the text color of the “Agree” and “Reject” buttons to “white”.

agree.setAttribute("style", "background-color: green; color: white; border-radius: .5rem;");
reject.setAttribute("style", "background-color: red; color: white; border-radius: .5rem;");
accept.setAttribute("style", "background-color: yellow; border-radius: .5rem;");

Output

Method 3: Add CSS With JavaScript Using the “createElement()” Method

If you want to create classes or ids in JavaScript styling as in the CSS styling, use the “createElement()” method. It is utilized to dynamically create a new element. For styling create a “style” element using this method. The “createElement(‘style’)” method in JavaScript is used to dynamically create a new style element, which can be used to add CSS styles to a web page.

Syntax
The given syntax is used for the “createElement()” method:

document.createElement(elementType);

For adding CSS style in JavaScript, use the given syntax:

const style = document.createElement('style');

Then append the style element in the head tag using the below syntax:

document.head.appendChild(style);

Here, “style” is a reference to the newly created style element, and “document.head” is the head element of the HTML document.

Example
First, create a style element using the “createElement()” method:

var style = document.createElement('style');

Now, create a “btn” class for applying the same styling on all buttons and ids “btn1”, “btn2” and “btn3” for individual button styling:

style.innerHTML = `
.btn {
font-size: 1.1rem;
padding: 3px;
margin: 2px;
font-family: sans-serif;
border-radius: .5rem;
}
#btn1{
background-color: green;
color: white;
}
#btn2{
background-color: red;
color: white;
}
#btn3{
background-color: yellow;
}
`;

Now, append the style element to the head of the document by passing as a parameter to the “appendChild()” method:

document.head.appendChild(style);

Output

That’s all about adding CSS in JavaScript.

Conclusion

For adding CSS with JavaScript, utilize the inline styling including the “style” Property, and “setAttribute()” method, or the global styling using the “createElement()” method. Global styling is more efficient while an inline method is not recommended as it makes it difficult to maintain the styles of application and can lead to code repetition. This article described the methods to add CSS with JavaScript.