For a very long time, manipulating classes was something that JavaScript did very poorly, often requiring the use of awkward regular expressions, which was one of the reasons that so many developers turned to JQuery in years past. Thankfully, JavaScript has had its own powerful class manipulation features for some time, with excellent browser support.
Manipulating classes in native JavaScript is achieved with the classList
property. If we have a figure
element on a page:
<figure class="aki">
<img src="aikido.jpg" alt>
<figcaption>An aikido teacher throwing a student</figcaption>
</figure>
And we grab a reference to the element using getElementsByClassName:
var akifig = document.getElementsByClassName("aki")[0];
We can get array-like structure of the classes currently applied to the element by using classList
. In this case, I’ll write the results to the console
:
console.log(akifig.classList);
> ["aki"]
Adding a class
We can add a class to the element by using the add
method:
akifig.classList.add("martial")
akifig.classList
> ["aki","martial"]
Multiple classes can be added by including them in the list:
akifig.classList.add("martial", "arts");
Removing a class
A class can be removed from an element with, not surprisingly, remove
:
akifig.classList.remove("aki")
akifig.classList
> ["martial"]
Like add
, it’s also possible to remove multiple classes by listing them.
Checking if an element has a class
You can check if an element has a specific class by using contains
:
if (akifig.classList.contains("martial")) {
console.log("Hiya");
}
Toggling a class
Rather than specifically adding and removing a class in response to an action, it’s much easier to toggle
it. If we have a button element underneath the figure
:
<figure class="aki">
<img src="aikido.jpg" alt>
<figcaption>An aikido teacher throwing a student</figcaption>
</figure>
<button>Switch</button>
And we grab the button with JavaScript, then we can easily switch a showhide
class back and forth on click:
var akifig = document.getElementsByClassName("aki")[0];
var switchHit = document.querySelector("figure + button");
switchHit.addEventListener("click", function() {
akifig.classList.toggle("hide");
})
The hide
class might consist of the following declaration:
.hide { display: none; }
… which will effectively flip the visibility of the figure
element back and forth with every click.
IE Limitations & Alternatives
IE 10 & 11, together with Android 4.3 and earlier, do not support classList
on SVG elements; nor do they allow multiple parameters on add
or remove
; IE9 and earlier does not support classList
at all. To deal with these limitations, I would recommend adding the classList.js
shim, or using className
instead. Using the previous examples:
To add a class, replacing all other classes:
akifig.className = "martial";
To remove all classes from an element:
akifig.className = "";
To add a class without removing other applied classes:
akifig.className += " flip";
(Note the space in front of the added class name).
Photograph by Daniele Oberti, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.