如何用js判断dom是否有存在某class的值
程序员文章站
2022-04-30 12:55:11
例如:
例如:
<html class="no-js"> <head> </head> <body> </body> </html>
判断html节点的class是否有no-js。
1.jquery的实现方式
$("html").hasclass('no-js');
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; } hasclass(document.queryselector("html"), 'no-js');
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.documentelement, "no-js") ) ;
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: 无节操的现代人,男人打头阵。
下一篇: 娱人娱己的搞笑图片,看着偷着乐吧。