如何用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 相关文章推荐
ECMAScript 创建自己的js类库
Nov 22 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
js实现3d悬浮效果
Feb 16 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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制作静态网站的模板框架(一)
2006/10/09 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
广告显示判断
2006/08/31 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
Dojo 学习要点
2010/09/03 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
js 计算图片内点个数的示例代码
2019/04/04 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
深入理解Django-Signals信号量
2019/02/19 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python3爬取torrent种子链接实例
2020/01/16 Python
暑期培训心得体会
2014/09/02 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
廉洁自律个人总结
2015/02/14 职场文书
禁毒主题班会教案
2015/08/14 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
python 爬取吉首大学网站成绩单
2021/06/02 Python
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
浅谈JavaScript作用域
2021/12/06 Javascript