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

Question

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

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

Answer 1

Нет необходимости использовать JQuery для него:

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

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

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

конечно, вы могли бы перейти в режим разработки и излишним написать плагин JQuery для него:

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

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

Answer 2

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

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

Это будет решение JQuery для других решений существуют и другие ответы!

Answer 3

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

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

Answer 4

Обратите внимание, что вы также можете использовать myElement.classList как простой массив. This is supported by all major browsers for a while now, apart IE 9 and below.

Answer 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>

HTML

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

Vanilla JavaScript. Он вернет массив классов.

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