Используя обычный 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, потому что
все еще _содержит_ класс
.class1`.Используйте метод element.classList
.contains
:
element.classList.contains(class);
Это работает во всех современных браузерах, и есть полифиллы для поддержки более старых браузеров.
Альтернатива, если вы работаете со старыми браузерами и не хотите использовать полифиллы для их исправления, использование indexOf
будет правильным, но вы должны немного подправить его:
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}
В противном случае вы также получите true
, если искомый класс является частью имени другого класса.
[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;
}
}
Он также менее избыточен ;)
В современных браузерах, вы можете просто использовать метод "содержит" элемент .classList
:
testElement.classList.contains(className)
в
<div id="test" class="main main-content content"></div>
var testElement = document.getElementById('test');
console.log({
'main' : testElement.classList.contains('main'),
'cont' : testElement.classList.contains('cont'),
'content' : testElement.classList.contains('content'),
'main-cont' : testElement.classList.contains('main-cont'),
'main-content' : testElement.classList.contains('main-content')
});
в
(от CanIUse.com)
Если вы хотите использовать элемент.classList
, но вы также хотите поддерживать старые браузеры, рекомендуется использовать этот полифилл на Илай серый.
Поскольку он хочет использовать переключатель(), я'м удивлены, никто не ставил еще далее:
var test = document.getElementById("test");
var testClasses = test.className.split(" ");
test.innerHTML = "";
for(var i=0; i<testClasses.length; i++) {
switch(testClasses[i]) {
case "class1": test.innerHTML += "I have class1<br/>"; break;
case "class2": test.innerHTML += "I have class2<br/>"; break;
case "class3": test.innerHTML += "I have class3<br/>"; break;
case "class4": test.innerHTML += "I have class4<br/>"; break;
default: test.innerHTML += "(unknown class:" + testClasses[i] + ")<br/>";
}
}
Вот небольшой отрывок, если вы пытаетесь проверить, если элемент содержит класс, без использования jQuery.
<и>
function hasClass(element, className) {
return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}
</а>
Этим объясняется тот факт, что элемент может содержать несколько имен классов, разделенных пробелами.
Или
Вы также можете назначить эту функцию на прототип элемента.
<и>
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
И это спровацировало такой (очень похож на jQuery это.hasClass()` функция):
document.getElementById('MyDiv').hasClass('active');
Это немного старый, но может кто-то найдет мое решение полезно:
// Fix IE's indexOf Array
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (searchElement) {
if (this == null) throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (len === 0) return -1;
var n = 0;
if (arguments.length > 0) {
n = Number(arguments[1]);
if (n != n) n = 0;
else if (n != 0 && n != Infinity && n != -Infinity) n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
if (n >= len) return -1;
var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
for (; k < len; k++) if (k in t && t[k] === searchElement) return k;
return -1;
}
}
// add hasClass support
if (!Element.prototype.hasClass) {
Element.prototype.hasClass = function (classname) {
if (this == null) throw new TypeError();
return this.className.split(' ').indexOf(classname) === -1 ? false : true;
}
}
Упрощенная проявляющаяся:<суп><б>1</б></SUP и ГТ;
function hasClassName(classname,id) {
return String ( ( document.getElementById(id)||{} ) .className )
.split(/\s/)
.indexOf(classname) >= 0;
}
<суп><б>1</б></суп> помощи indexOf
для массивов не поддерживается IE (конечно). Есть много патчи можно найти в сети для этого.
Я знаю, там много ответов, но большинство из них являются дополнительные функции и дополнительные занятия. Это тот, который я лично использую; гораздо чище и гораздо меньше строк кода!
if( document.body.className.match('category-page') ) {
console.log('yes');
}
элемент.матчи(selectorString)
По данным веб-МДН документы:
и GT; элемент.спички()
метод возвращает значение true, если элемент будет выбран по указанной строке селектор; в противном случае возвращает false.
Таким образом, вы можете использовать элемент.спички()
, чтобы определить, если элемент содержит класс.
в
const element = document.querySelector('#example');
console.log(element.matches('.foo')); // true
<div id="example" class="foo bar"></div>
в
Я'ве создали прототип способ, который использует classList
, если это возможно, то прибегает к помощи indexOf
:
в
<p class='a b c'>This is a <b>test</b> string</p>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
<text x="10" y="20" class='a'>SVG Text Example</text>
</svg>
Element.prototype.hasClass = Element.prototype.hasClass ||
function(classArr){
var hasClass = 0,
className = this.getAttribute('class');
if( this == null || !classArr || !className ) return false;
if( !(classArr instanceof Array) )
classArr = classArr.split(' ');
for( var i in classArr )
// this.classList.contains(classArr[i]) // for modern browsers
if( className.split(classArr[i]).length > 1 )
hasClass++;
return hasClass == classArr.length;
};
///////////////////////////////
// TESTS (see browser's console when inspecting the output)
var elm1 = document.querySelector('p');
var elm2 = document.querySelector('b');
var elm3 = elm1.firstChild; // textNode
var elm4 = document.querySelector('text'); // SVG text
console.log( elm1, ' has class "a": ', elm1.hasClass('a') );
console.log( elm1, ' has class "b": ', elm1.hasClass('b') );
console.log( elm1, ' has class "c": ', elm1.hasClass('c') );
console.log( elm1, ' has class "d": ', elm1.hasClass('d') );
console.log( elm1, ' has class "a c": ', elm1.hasClass('a c') );
console.log( elm1, ' has class "a d": ', elm1.hasClass('a d') );
console.log( elm1, ' has class "": ', elm1.hasClass('') );
console.log( elm2, ' has class "a": ', elm2.hasClass('a') );
// console.log( elm3, ' has class "a": ', elm3.hasClass('a') );
console.log( elm4, ' has class "a": ', elm4.hasClass('a') );
в
[1]: http://jsbin.com/hezoxe/edit?html этого JS,выход
Здесь'с учетом регистра тривиальное решение:
function hasClass(element, classNameToTestFor) {
var classNames = element.className.split(' ');
for (var i = 0; i < classNames.length; i++) {
if (classNames[i].toLowerCase() == classNameToTestFor.toLowerCase()) {
return true;
}
}
return false;
}
Феликс'ы трюк добавления пространства с фланга className и строку вы'вновь искать правильный подход к определения, является ли элемент имеет класс или нет.
Иметь различное поведение в зависимости от класса, вы можете использовать ссылки на функции, или функции, в карте:
фн1 функция(элемент){ / код для элемента с класс1 / }
фн2 функция(элемент){ / код для элемента с класс2 / }
фн2 функция(элемент){ / код для элемента с класс_3 / }
ВАР ФНС={'класса Class1': фн1, 'класс2': фн2, 'класс_3': fn3 по};
для(ВАР я в ФНС) { если(hasClass(тест меня)) { ФНСя; } }
Я бы Поли заполнить функциональность classList и использовать новый синтаксис. Таким образом новый браузер будет использовать новую реализацию (что гораздо быстрее) и только старые браузеры воспользоваться производительности из кода.
Если элемент имеет только одно имя класса, вы можете быстро проверить его при получении атрибута класса. Другие ответы являются гораздо более надежными, но это, конечно же, это's используйте дел.
if ( element.getAttribute('class') === 'classname' ) {
}
Это немного, но если у вас есть событие, которое срабатывает выключатель, можно обойтись и без классов:
<div id="classOne1"></div>
<div id="classOne2"></div>
<div id="classTwo3"></div>
Вы можете сделать
$('body').click( function() {
switch ( this.id.replace(/[0-9]/g, '') ) {
case 'classOne': this.innerHTML = "I have classOne"; break;
case 'classTwo': this.innerHTML = "I have classTwo"; break;
default: this.innerHTML = "";
}
});
.заменить(/[0-9]/Г, '')
удаляет цифры от идентификатор
.
Это немного hacky, но работает долго переключается без дополнительных функций или петли
Увидеть этот сайт CodePen ссылку для быстрой и простой способ проверки элемент, если он имеет определенный класс, используя ваниль на JavaScript~!
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
Просто чтобы добавить к ответу для людей, пытающихся найти имена классов в элементах встроенный SVG.
Изменение функции hasCLass () на:
function hasClass(element, cls) {
return (' ' + element.getAttribute('class') + ' ').indexOf(' ' + cls + ' ') > -1;
}
Вместо использования имя класса
собственность вы'll необходимо использовать метод функции getattribute ()
, чтобы захватить имя класса.
Это поддерживается в IE8+.
Сначала мы проверяем, если classList
существует, если он делает, мы можем использовать "содержит" метод, который поддерживается в IE10+. Если мы на IE9 или 8 он использует регулярное выражение, которое является не как эффективным, но является кратким полифилл.
if (el.classList)
el.classList.contains(className);
else
new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);