本文主要介绍了如何用javascript判断dom是否有存在某class的值。具有很好的参考价值,下面跟着小编一起来看下吧
例如:
<html>
<head>
</head>
<body>
<div class="bg img" id="app">
<p class="aaa"></p>
</div>
</body>
</html>
判断html节点的class是否有no-js。
1. jquery的实现方式
$(".img").hasClass(‘bg’);
jquery源码的实现方式:
var rclass = /[\t\r\n\f]/g;
jQuery.fn.extend({
hasClass: function(selector) {
var className = " " + selector + " “,
i = 0,
l = this.length;
for (; i < l; i++) {
if (this[i].nodeType === 1 &&
(” " + this[i].className + " “).replace(rclass, " “).indexOf(className) > -1) {
return true;
}
}
return false;
}
})
2. js的实现方式
function hasClass(element, cls) {
return (’ ’ + element.className + ’ ‘).indexOf(’ ’ + cls + ’ ') > -1;
}
console.log(hasClass(document.querySelector(”.img”), ‘bg’))
3. H5的classList
说明下:
字符串的indexOf方法是无法区分.no-js和.no-js-indeed这样的类;类名的分隔符可能不是空格,还有可能是\t等。
代码:
var hasClass = (function() {
var div = document.createElement("div");
if("classList" in div && typeof div.classList.contains === "function") {
return function(elem, className) {
return elem.classList.contains(className);
};
} else {
return function(elem, className) {
var classes = elem.className.split(/\s+/);
for(var i = 0; i < classes.length; i++) {
if(classes[i] === className) {
return true;
}
}
return false;
};
}
})();
alert(hasClass(document.querySelector(".img"), "bg"));
结果: