使用纯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类。
在哪个元素中当前是类的。酒吧”?这里有另一个解决方案,但取决于你。
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等。
要检查元素是否包含类,可以使用元素classList属性的contains()方法:*
element.classList.contains(className);
*假设你有以下元素:
<div class="secondary info">Item</div>*
要检查元素是否包含二级类,可以使用以下代码:
const div = document.querySelector('div');
div.classList.contains('secondary'); // true
下面返回false,因为元素没有类错误:
const div = document.querySelector('div');
div.classList.contains('error'); // false