How to get all CSS classes of an element?

Question

I have an element with multiple classes and I'd like to get its css classes in an array. How would I do this? Something like this:

var classList = $(this).allTheClasses(); 

Answer 1

No need to use jQuery for it:

var classList = this.className.split(' ') 

If you for some reason want to do it from a jQuery object, those two solutions work, too:

var classList = $(this)[0].className.split(' ') var classList = $(this).prop('className').split(' ') 

Of course you could switch to overkill development mode and write a jQuery plugin for it:

$.fn.allTheClasses = function() {     return this[0].className.split(' '); } 

Then $(this).allTheClasses() would give you an array containing the class names.

Answer 2

Note that you can also use myElement.classList as a simple array-like object:

const classList = myElement.classList; 

This is supported by all major browsers for a while now, apart IE 9 and below.