如何用js判断dom是否有存在某class的值


Posted in Javascript onFebruary 13, 2017

例如:

<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

说明下:

  1. 字符串的indexOf方法是无法区分.no-js和.no-js-indeed这样的类;
  2. 类名的分隔符可能不是空格,还有可能是\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") ) ;

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

Javascript 相关文章推荐
使弱类型的语言JavaScript变强势
Jun 22 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
AngularJS学习第一篇 AngularJS基础知识
Feb 13 #Javascript
详解Javascript中DOM的范围
Feb 13 #Javascript
JS简单判断函数是否存在的方法
Feb 13 #Javascript
浅谈js中的变量名和函数名重名
Feb 13 #Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 #Javascript
js实现打地鼠小游戏
Feb 13 #Javascript
canvas实现钟表效果
Feb 13 #Javascript
You might like
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php GUID生成函数和类
2014/03/10 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
js面试题之异步问题的深入理解
2020/09/20 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
python 数据加密代码
2008/12/24 Python
Python中的自定义函数学习笔记
2014/09/23 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python秒算24点实现及原理详解
2019/07/29 Python
django model object序列化实例
2020/03/13 Python
python 如何引入协程和原理分析
2020/11/30 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
联强国际笔试题面试题
2013/07/10 面试题
党员反对四风思想汇报范文
2014/10/25 职场文书
工程安全生产协议书
2014/11/21 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL