如何用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上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
node.js中express-session配置项详解
May 31 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
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
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
一些mootools的学习资源
2010/02/07 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
vue引入静态js文件的方法
2020/06/20 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
200行自定义python异步非阻塞Web框架
2017/03/15 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
销售人员职业生涯规划范文
2014/03/01 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
学生检讨书怎么写
2014/10/09 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
暑期社会实践证明书
2014/11/17 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
介绍信如何写
2015/01/31 职场文书
白鹤梁导游词
2015/02/06 职场文书
用python实现监控视频人数统计
2021/05/21 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
Python os和os.path模块详情
2022/04/02 Python