Как получить все классы CSS элемента?

У меня есть элемент с несколькими классами, и я бы хотел получить его классы css в массиве. Как мне это сделать? Что-то вроде этого:

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

Ответы

Ответ 1

Не нужно использовать jQuery для него:

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

Если вы по какой-то причине хотите сделать это из объекта jQuery, эти два решения тоже работают:

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

Конечно, вы можете переключиться на режим развития overkill и написать для него плагин jQuery:

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

Затем $(this).allTheClasses() предоставит вам массив, содержащий имена классов.

Ответ 2

Обратите внимание, что вы также можете использовать myElement.classList как простой объект, похожий на массив:

const classList = myElement.classList;

Это поддерживается всеми основными браузерами, кроме IE 9 и ниже.

Ответ 3

Это должно сделать для вас работу:

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

Это будет решение jQuery для других решений, есть другие ответы!

Ответ 4

Проверьте это:

var classes = $('selector').prop('classList');

Ответ 5

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>