使用纯JavaScript(不是jQuery),是否有任何方法来检查元素是否包含类?
目前,我正在这样做:
var test = document.getElementById("test");
var testClass = test.className;
switch (testClass) {
例“class1”:
测试。innerHTML = "我有class1";
打破;
例“class2”:
测试。innerHTML = "I have class2";
打破;
例“class3”:
测试。innerHTML = "I have class3";
打破;
“一年级”情况:
测试。innerHTML = "I have class4";
打破;
默认值:
测试。innerHTML = "";
}
<div id="test" class="class1"></div>
问题是,如果我把HTML改成这个…
<div id="test" class="class1 class5"></div>
...不再有一个精确的匹配,所以我得到的默认输出为nothing("")。但我仍然希望输出为I have class1,因为<div>仍然包含。class1类。
使用元素。contains方法:
element.classList.contains(class);
这适用于所有当前的浏览器,也有支持旧浏览器的腻子。
Alternatively, if you work with older browsers and don't want to use polyfills to fix them, using indexOf is correct, but you have to tweak it a little:
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}
否则,如果您正在寻找的类是另一个类名的一部分,也会得到true。
DEMO
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;
}
}
它也更少冗余;)
在哪个元素中当前是类的。酒吧”?这里有另一个解决方案,但取决于你。
var reg = /Image/g, // regexp for an image element
query = document.querySelector('.bar'); // returns [object HTMLImageElement]
query += this.toString(); // turns object into a string
if (query.match(reg)) { // checks if it matches
alert('the class .bar is attached to the following Element:\n' + query);
}
jsfiddle演示
当然,这只是查找一个简单的元素<img>(/Image/g),但您可以将所有元素放在一个数组中,如<li> is / li /g, <ul> = / ul /g等。
我为我的网站创建了这些函数,我只使用香草javascript,也许它会帮助到一些人。
首先,我创建了一个函数来获取任何HTML元素:
//return an HTML element by ID, class or tag name
var getElement = function(selector) {
var elements = [];
if(selector[0] == '#') {
elements.push(document.getElementById(selector.substring(1, selector.length)));
} else if(selector[0] == '.') {
elements = document.getElementsByClassName(selector.substring(1, selector.length));
} else {
elements = document.getElementsByTagName(selector);
}
return elements;
}
然后是接收要移除的类的函数和元素的选择器:
var hasClass = function(selector, _class) {
var elements = getElement(selector);
var contains = false;
for (let index = 0; index < elements.length; index++) {
const curElement = elements[index];
if(curElement.classList.contains(_class)) {
contains = true;
break;
}
}
return contains;
}
现在你可以这样使用它:
hasClass('body', 'gray')
hasClass('#like', 'green')
hasClass('.button', 'active')
希望能有所帮助。