Tutorial

How To Modify CSS Classes in JavaScript

JavaScript

Introduction

In this tutorial, you will learn how to modify CSS classes using the JavaScript classList object for your DOM Manipulation project. The classList object allows you to adjust CSS classes that are assigned to an HTML element.

Prerequisites

Starting Your Project

Create an index.html file, and include a style tag with CSS classes and a paragraph element with an id:

index.html
 <style>
  .colorText {
    color: purple;
  }

  .boldText {
    font-weight: bold;
  }

  .bigText {
    font-size: 35px;
  }
</style>

<p id="myText">
  Hello World! 
</p>

Let’s now modify your text with the classList property and apply your CSS classes.

Using the .add() and .contains() classList Methods

Create an index.js file, grab a reference to your paragraph element, and call on the classList.add() method:

index.js
 const myText = document.getElementById('myText');

myText.classList.add('colorText');

The built-in classList.add() method applies a class to your HTML element. In this case, your text in the paragraph element will now appear purple.

You can also check if the CSS class exists in your paragraph element using the classList.contains() method to return a boolean:

index.js
 const myText = document.getElementById('myText');

console.log(myText.classList.contains('colorText')); // true

Since the CSS class colorText exists in your paragraph element, your call returns true.

Applying the .item() and .remove() classList Methods

In your index.js file, add more CSS classes to your paragraph element:

index.js
const myText = document.getElementById('myText');

myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];

The classList property stores each additional class in an array. If you console out myText.classList, an array with your CSS classes will output.

To check on the specified index of each CSS class in the array, call on the classList.item() method:

index.js
const myText = document.getElementById('myText');

myText.classList.item('boldText'); // 2

To remove a CSS class, use the classList.remove() method:

index.js
 const myText = document.getElementById('myText');

myText.classList.remove('bigText');
console.log(myText.classList); // ['colorText', 'boldText'];

Once you console out myText.classList, the CSS class you removed does not appear in the array and will not apply to your paragraph element.

Now that you can add, check, and remove CSS classes, let’s explore how to amplify other classList methods.

Handling the classList .toggle() Method

Instead of calling classList.add() and classList.remove() simultaneously, you can utilize the classList.toggle() method:

To achieve this, implement an event listener on a button in your index.js file:

index.js
 textButton.addEventListener('click', () => {
  myText.classList.toggle('newFont');
});

With each click, classList.toggle() will add the CSS class if it does not exist in the classList array and return true. If the CSS class exists, the method will remove the class and return false.

index.js
 const anotherClass = myText.classList.toggle('newSize');

console.log(anotherClass); // true --> class was added

You can also add a boolean as an optional second argument in the classList.toggle() method. This will either add or remove the CSS class, depending on how the second argument evaluates:

index.js
const bool = false; 

let firstToggle = myText.classList.toggle('newSize', bool);
console.log(firstToggle);
// false, 'newFont' already exists and will remove from classList array

let secondToggle = shadesEl.classList.toggle('newColor', !bool);
console.log(secondToggle);
// true, 'newColor' does not exist and will add the class

The classList.toggle() method supports adding and removing CSS classes whether they exist or not in your array with shorter lines of code.

Conclusion

The classList property allows greater performance and functionality to alter your HTML elements and their CSS classes within JavaScript.

For additional reading, check out the article How To Modify Attributes, Classes, and Styles in the DOM and the ebook Understanding the DOM — Document Object Model.

Creative Commons License