Làm thế nào để có được tất cả các lớp CSS của một phần tử?

Question

Tôi có một phần tử với nhiều lớp và tôi muốn lấy các lớp css của nó trong một mảng. Làm thế nào tôi sẽ làm điều này? Một cái gì đó như thế này:

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

Answer 1

Không cần phải sử dụng jQuery cho nó:

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

Nếu bạn vì một lý do muốn làm điều đó từ một đối tượng jQuery, hai giải pháp làm việc, quá:

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

Tất nhiên bạn có thể chuyển sang chế độ phát triển quá mức cần thiết và viết một plugin jQuery cho nó:

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

Sau đó, $(this).allTheClasses() sẽ cung cấp cho bạn một mảng chứa tên lớp.

Answer 2

này nên làm việc cho bạn:

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

này sẽ là giải pháp jQuery cho các giải pháp khác có câu trả lời khác!

Answer 3

Kiểm tra này ra:

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

Answer 4

Lưu ý rằng bạn cũng có thể sử dụng myElement.classList như một mảng đơn giản. 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. Nó sẽ trả về một mảng các lớp.

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