How can I change an element's class with JavaScript?

Mastering the art of class manipulation

If you want to go beyond the quick answer and ace your class manipulations, here's a structured guide for you.

The power of classList

classList is not just a tool for adding classes. You can also remove a specific class:

element.classList.remove('oldClass'); // Say goodbye to the old.


Want to play class roulette? You can toggle a class on or off based on its current state:

element.classList.toggle('active'); // You're hot and you're cold! 


Additionally, ensure that a class exists before fiddling with it, using contains:

if (element.classList.contains('someClass')) {
  // The class has been caught red-handed! 
}


Making peace with older browsers

Struggling with backwards compatibility? If older IE browsers cause trouble, fight back with a trusty polyfill:

if (!("classList" in document.createElement("_"))) {
   // Ready the polyfill cannons!
}


A well-researched polyfill will keep you on the safe side.

Playing the old-school way with className

For those who trust the tried and tested, className is your tool:

var element = document.getElementById('myElement');
element.className = element.className.replace(/\boldClass\b/g, ""); // The old must make way for the new!


Regex comes to the rescue here, ensuring that your new class doesn't ruin the existing ones.

Dynamic changes and event handling

Using addEventListener, you can have your code respond to user interactions just like a well trained dog:

element.addEventListener('click', function() {
  this.classList.toggle('active'); // Toggle time! User's in control.
});


Don't forget to combine this with window.onload. Why? To make sure your scripts take action only after the DOM is loaded and ready for some action:

window.onload = function() {
  // The stage is set. Let the magic begin!
}; 


Deep dive: Solutions to real-world scenarios

Let's explore deeper waters with real-world examples and pro tips to bulletproof your code against common issues.

Keeping class concat neat and clean

Adding a class without demolishing existing ones needs a careful touch:

element.className += ' ' + newClass; // Adding with care. Leaving no traces behind.


Sync in a space during addition to avoid awkward naming.

Simplifying with jQuery

For less hair-pulling and more functionality, jQuery simplifies many tasks:

$('.myElement').on('click', function() {
  $(this).toggleClass('active'); // One toggle to rule them all!
});


Very handy when handling scenarios related to multiple elements or complex event delegation.

Cleanliness is next to godliness

Keep HTML and JavaScript separate. This helps you:

• Dodge the dreaded inline onclick attributes.
• Keep JavaScript files separate wherever possible.

This leads to cleaner, easily maintainable code that warms the hearts of your fellow developers.

Check before you remove

When pulling the class carpet from under an element's feet, ensure that it actually possesses that class:

if (element.classList.contains('myClass')) {
  element.classList.remove('myClass'); // Class dismissed! 
}


This careful step prevents futile DOM manipulations.