How To Modify CSS Classes in 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

• A general knowledge of JavaScript. To learn more about JavaScript, check out the series How To Code in JavaScript.
• A general knowledge of CSS. For an introduction to CSS, check out the tutorial How To Apply CSS Styles to HTML with Cascade and Specificity.

Starting Your Project

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

[label 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:

[label 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:

[label 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:

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:

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

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

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

[label 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:

[label 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.

[label 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:

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.