Kiểm tra xem một lớp CSS tồn tại mà không có jQuery

Question

Sử dụng javascript vani hoặc nguyên mẫu có thể ai đó chỉ cho tôi cách tôi có thể chạy kiểm tra xem lớp học có tồn tại không? Ví dụ: tôi đang thêm một lớp được gọi là hideIt với mã này:

var overlay = document.getElementById("overlay_modal"); 
overlay.className += " hideIt"; 

Tôi cũng cần một tập lệnh sau này có thể kiểm tra xem hideIt có tồn tại hay không. Tôi đã thử những thứ như:

if (overlay.className == "hideIt") 

Nhưng điều đó không tốt. Bất kỳ ý tưởng?

Answer 1

Sử dụng regexp. \b sẽ đối sánh các ranh giới từ (một dấu cách, ký tự dòng mới, ký tự dấu chấm câu hoặc kết thúc chuỗi).

var overlay = document.getElementById("overlay_modal"); 
if (overlay.className.match(/\bhideIt\b/)) 
{ 
    // frob a widget 
} 

Answer 2

Bạn có thể sử dụng getElementsByClassName(), mặc dù điều này không được hỗ trợ trong tất cả trình duyệt (không phải trong IE < 9):

if (!document.getElementsByClassName('classname').length){ 
    // class name does not exist in the document 
} 

else { 
    // class exists in the document 
} 

Bạn có thể, tùy thuộc vào yêu cầu tương thích trình duyệt, sử dụng querySelectorAll():

if (document.querySelectorAll('#overlay_modal.hideIt')) { 
    // the element with id of overlay_modal exists and has the class-name 'hideIt' 
} 

Tham chiếu:

• Compatibility for querySelectorAll at Quirksmode.
• querySelectorAll() at Mozilla Developer Network.
• getElementsByClassName() at Mozilla Developer Network.
• Compatibility for getElementsByClassName(), at Quirksmode.

Answer 3

var id = document.getElementById("id"); 
var classes = id.className.split(" "); 
if(classes.indexOf("class_name") == -1) 
{ 
} 

Answer 4

Bởi vì câu hỏi yêu cầu nó ở đây cũng là the Prototype way,

if (overlay.hasClassName('hideIt'))