Використовуючи звичайний JavaScript (не jQuery), чи можна якось перевірити, чи елемент містить клас?
На даний момент я роблю так:
var test = document.getElementById("test");
var testClass = test.className;
switch (testClass) {
case "class1":
test.innerHTML = "I have class1";
break;
case "class2":
test.innerHTML = "I have class2";
break;
case "class3":
test.innerHTML = "I have class3";
break;
case "class4":
test.innerHTML = "I have class4";
break;
default:
test.innerHTML = "";
}
<div id="test" class="class1"></div>
Проблема в тому, що якщо я зміню HTML на такий...
<div id="test" class="class1 class5"></div>
...то вже не буде точного збігу, тому я отримаю за замовчуванням виведення нічого (""
). Але я все ще хочу, щоб виводилось I have class1
, тому що <div>
все ще містить клас .class1
.
Використовувати метод element.classList
.contains
:
element.classList.contains(class);
Це працює на всіх сучасних браузерах, і є поліфункції для підтримки старих браузерів.
**В якості альтернативи, якщо ви працюєте зі старими браузерами і не хочете використовувати поліфіли для їх виправлення, використання indexOf
є правильним, але вам доведеться його трохи налаштувати:
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}
В іншому випадку ви також отримаєте strue
, якщо клас, який ви шукаєте, є частиною іншого імені класу.
[DEMO][2]
jQuery використовує схожий (якщо не такий самий) метод.
Застосовується до прикладу:.
Оскільки це не працює разом з оператором switch, ви могли б досягти того ж ефекту за допомогою цього коду:
var test = document.getElementById("test"),
classes = ['class1', 'class2', 'class3', 'class4'];
test.innerHTML = "";
for(var i = 0, j = classes.length; i < j; i++) {
if(hasClass(test, classes[i])) {
test.innerHTML = "I have " + classes[i];
break;
}
}
Він також менш надлишковий ;)
Спробуй це:
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};