我是靠谱客的博主 香蕉鼠标,这篇文章主要介绍如何用js判断dom是否有存在某class的值,现在分享给大家,希望可以做个参考。

例如:

复制代码
1
2
3
4
5
6
<html class="no-js"> <head> </head> <body> </body> </html>

判断html节点的class是否有no-js。

1.jquery的实现方式

$("html").hasClass('no-js');

jquery源码的实现方式:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var rclass = /[trnf]/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的实现方式

复制代码
1
2
3
4
function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } hasClass(document.querySelector("html"), 'no-js');

3.H5的classList

说明下:

  1. 字符串的indexOf方法是无法区分.no-js和.no-js-indeed这样的类;
  2. 类名的分隔符可能不是空格,还有可能是t等。

代码:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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.documentElement, "no-js") ) ;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

最后

以上就是香蕉鼠标最近收集整理的关于如何用js判断dom是否有存在某class的值的全部内容,更多相关如何用js判断dom是否有存在某class内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(136)

评论列表共有 0 条评论

立即
投稿
返回
顶部