50

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();
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
frenchie
  • 51,731
  • 109
  • 304
  • 510
  • possible duplicate of [Get Class List for Element with jQuery](http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery) – Felix Kling Feb 14 '12 at 15:26
  • duplicates are the results of different search queries. Some people will google "Get Class List for Element" and others will google "getting the css classes of an element". I did the latter, and others will too. – frenchie Feb 14 '12 at 15:34

6 Answers6

87

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.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • ok, the reason I think I need to do this in jquery is that I'm passing a jquery object as a function's parameter and using the code like this: var classList = TheObject.prop('className').split(' '); It works; is this the best way to do it? – frenchie Feb 14 '12 at 15:22
  • Yes, that's the best way. The plugin would be nicer though if you use it at multiple places in your code. – ThiefMaster Feb 14 '12 at 15:24
  • ok, thanks for the code. I'll come back to the plug-in idea if I need to use this in several places. – frenchie Feb 14 '12 at 15:26
23

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.

Jérôme Beau
  • 10,608
  • 5
  • 48
  • 52
  • 6
    Actually classList is not an array but a [Dom token list](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList) so keep in mind you can't use array methods with it straight away. – Esko Dec 21 '17 at 11:41
  • `Array.from(myElement.classList)` – async await May 30 '23 at 00:31
9

This should do the work for you:

var classes = $('div').attr('class').split(" ");

This would be the jQuery solution for other solutions there are other answers !

mas-designs
  • 7,498
  • 1
  • 31
  • 56
3

Check this out:

var classes = $('selector').prop('classList');
hardevine
  • 31
  • 1
  • 4
1

function showClasses() {
  const div = document.querySelector('div');
  const classes = div.className.split(' ');

  const p = document.querySelector('p');
  p.innerHTML = classes;
}
<div class="foo bar">This div has foo, bar classes</div>
<p class='output'>Above div classes appear here</p>
<button onClick="showClasses();">Show div classes</button>

HTML

<div class="foo bar">This div has foo, bar classes</div>

Vanilla JavaScript. It will return an array of classes.

const div = document.querySelector('div');
const classes = div.className.split(" "); // ['foo', 'bar']
ethannguyens
  • 66
  • 4
1

element.classList.value

console.log("class")
console.log(document.getElementById('c2').classList.value)
<div id="c2" class="class1 class2"> i am two class</div>

getAttribute

    console.log("class")
    console.log(document.getElementById('c2').getAttribute('class'))
    <div id="c2" class="class1 class2"> i am two class</div>

className

   console.log("class")
        console.log(document.getElementById('c2').className)
        <div id="c2" class="class1 class2"> i am two class</div>

to make an array choose any one of above method

string.split(' ');

Balaji
  • 9,657
  • 5
  • 47
  • 47