使用纯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类。
我已经创建了一个使用classList的原型方法，如果可能，否则诉诸indexOf:
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') );
<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>
测试页面
这里有一个小片段，如果你试图检查元素是否包含一个类，而不使用jQuery。
function hasClass(element, className) {
return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}
这说明元素可能包含多个用空格分隔的类名。
OR
您还可以将此函数分配给元素原型。
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
并像这样触发它(非常类似于jQuery的.hasClass()函数):
document.getElementById('MyDiv').hasClass('active');
在哪个元素中当前是类的。酒吧”?这里有另一个解决方案，但取决于你。
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
