Is There A Way To Add Remove Several Classes In One Single Instruction With Classlist

One of the handy features in JavaScript is the classList property, which allows you to manipulate classes on HTML elements with ease. If you've ever wondered if there's a way to add and remove multiple classes in one fell swoop using classList, the answer is yes! While the classList property itself doesn't provide a method to add or remove multiple classes simultaneously, you can achieve this using a neat trick.

Here's how you can add or remove several classes in one single instruction using classList:

To add multiple classes:

element.classList.add('class1', 'class2', 'class3');

By passing multiple class names separated by commas to the add method of classList, you can add them all in one go. These classes will be appended to the element's class attribute.

To remove multiple classes:

element.classList.remove('class1', 'class2', 'class3');

Similarly, you can remove several classes at once by listing them within the remove method call. The specified classes will be removed from the element's class attribute.

It's worth noting that these methods are additive and subtractive, respectively. This means that if a class is already added or removed, calling these methods will not throw an error or have any unintended consequences. JavaScript will simply skip over classes that are already in the desired state.

Here's a complete example to illustrate adding and removing multiple classes in action:

Html

<title>Multiple Classes Example</title>

  .class1 { color: blue; }
  .class2 { font-weight: bold; }
  .class3 { text-decoration: underline; }



<div id="myDiv">Example Text</div>

const element = document.getElementById('myDiv');

// Adding multiple classes
element.classList.add('class1', 'class2');

// Removing multiple classes
element.classList.remove('class1', 'class3');

In this example, the element with the id 'myDiv' initially has the class 'class1'. Then, it adds 'class2' and removes 'class1' and 'class3' in subsequent steps. You can see how the styles change accordingly, demonstrating the power of manipulating multiple classes at once.

By using the add and remove methods of the classList property in combination with passing multiple class names, you can streamline your code and easily manage classes in your web projects. This simple technique can make your JavaScript code cleaner and more efficient when dealing with CSS classes.

Related posts:

Contact Info