Any web developer starts their journey by learning HTML, CSS, and JavaScript. HTML gives structure to our webpages, JavaScript is a web programming language that gives us the ability to interact with users whereas CSS gives us the ability to style our web applications and web pages.

To manipulate and work with the CSS classes, JavaScript offers us classList and className properties that can be used to manipulate the class attribute.The class name can be used by JavaScript to manipulate the specified element while CSS uses that class name to style that element.

Hence, in this comprehensive guide, we will go through how to modify CSS classes in JavaScript but first let us set the environment by initializing elements in HTML and then styling that element in CSS.

Setting Up the Environment

Let us create a div element that works like a container and place two elements inside this container. One will be the h2 tag and the other will be the p tag.

To link the CSS file to this HTML we have inserted a link tag in the head and referenced our CSS file inside the href attribute (style.css):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Modify CSS using JavaScript</title>
  <link rel="stylesheet" href="style.css"> 
</head>
<body>
  <div class="container">
    <h2>England</h2>
    <p>The capital of England is London</p>
  </div>
</body>
</html>

To get the reference of the div element inside CSS, we have used the class attribute. We performed some styling on the div container as well as the elements inside the div container:

.container{
  background-color: rgb(54, 224, 207); 
}

.container h2, p{
  color: rgb(125, 104, 184); 
}

The output will look like this:

Environment Setup Output

Modifying CSS Classes

As mentioned in the introductory part of this article, JavaScript offers us classList and className properties that can be used to manipulate the class attribute.

The className is used to set a value to a class directly whereas using the classList property we can perform the following functions:

  • classList.add() is used to add class values
  • classList.toggle() is used to turn on or off a class
  • classList.replace() is used to replace a class value with another class value
  • classList.contains() is used to check whether a value exists or not
  • classList.remove() is used to remove a class value

Let us go through an example to better understand the classList property and its built-in methods. We will use the same HTML and CSS code from the environment setup.

First, let us use the className property to assign a class to the h2 attribute. For that purpose we have referenced a class in CSS that doesn’t exist at the moment and give it some styling shown below:

.info{
  background-color: white;
  border: 2px solid black; 
}

Next, get the reference of the h2 element using the querySelector(‘h2‘) which will select the first h2 element in the HTML code. Next, use the className property to assign the info class to the h2 element:

// Select first h2 element
const myh2 = document.querySelector(‘h2‘);

// Set the info class to myh2 
myh2.className = ‘info‘;

To reference this JavaScript code use the script tag with src attribute in the HTML code giving the JavaScript file name in src attribute:

<script src="code.js"></script>

The output will now look like this:

ClassName Example Output

Let us now modify the CSS classes using the classList property. As seen earlier, the classList property offers us some built-in methods that we can use to modify CSS classes.

We will use the classList.add() which will add a class in the following example:

// Select the first div 
const hideDiv = document.querySelector(‘div‘);

// Add hidden class  
hideDiv.classList.add(‘hidden‘);

Next, go to the CSS file and initialize the hidden class by making the display none so that the div is not visible:

.hidden {
  display: none; 
}

Now you will see that the div element will be hidden and you will not see anything on your webpage:

Add Class Example Output

Let us now use the classList.replace() method where we will replace the existing hidden class with another class wrap:

// Select the first div
const hideDiv = document.querySelector(‘div‘);

// Add hidden class   
hideDiv.classList.add(‘hidden‘);  

// Replace hidden class with wrap class
hideDiv.classList.replace(‘hidden‘, ‘wrap‘);

Next, go to your CSS file and style the wrap class:

.wrap {
  font-size: large;  
}

You will now see that our content is now visible again and the font size will be larger than before:

Replace Class Example Output

Other Useful Methods

In addition to add() and replace(), classList also provides other useful methods:

toggle()

This method toggles a class value on and off. For example:

const el = document.getElementById(‘myElement‘);
el.classList.toggle(‘myClass‘);

If myClass exists on myElement, it will be removed. If it does not exist, it will be added.

This allows you to essentially add a "toggle" functionality for a class.

contains()

This method checks if a class value exists on the element. For example:

const el = document.getElementById(‘myElement‘); 

if(el.classList.contains(‘myClass‘)) {
  // myClass exists on element
} else {
  // myClass does NOT exist on element
}

This allows you to check for a class before manipulating.

remove()

This method removes a class value if it exists on the element. For example:

const el = document.getElementById(‘myElement‘);

el.classList.remove(‘myClass‘);

This will check if myClass exists, and remove it if so.

Conclusion

JavaScript offers us two properties that we can use to modify CSS classes:

  • classList
  • className property

The className property is used to set a value to a CSS class directly whereas the classList gives us some built-in methods to manipulate the CSS classes.

For example, the classList.add() gives us the ability to add class values, classList.remove() gives us the ability to remove a class, classList.toggle() gives us the ability to add toggling to a class and the classList.replace() gives us the ability to replace a class value with another class.

In summary, through comprehensive examples we saw how to leverage both className and classList to dynamically modify CSS classes using JavaScript. The key takeaways are:

  • className allows directly overwriting class attribute
  • classList provides methods like add(), remove(), toggle(), etc.
  • Useful for changing styling dynamically based on user interaction

I hope you found this beginner‘s guide useful! Let me know if you have any other questions.

Related posts:

  1. Crafting One-Line Magic with JavaScript Ternary Operators
  2. How to Get the Value of Text Input Field Using JavaScript
  3. How to Check if Current URL Contains a String in JavaScript: A Comprehensive Guide for Developers
  4. How to Pause an Interval in JavaScript: An In-Depth Guide
  5. Mastering Dynamic Object Keys in JavaScript: An Expert Guide
  6. How to Remove Properties from JavaScript Objects
  7. How to Change Button Color on Click in JavaScript: An Expert Guide
  8. How to Dynamically Change an Element‘s Background Color in JavaScript

Similar Posts