如何用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 web对话框与弹出窗口
Feb 22 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
javascript 实现map集合
Apr 03 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
jQuery实现飞机大战小游戏
Jul 05 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
JavaScript类库D
2010/10/24 Javascript
js单词形式的运算符
2014/05/06 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
浅析Python中的多条件排序实现
2016/06/07 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
Django框架 querySet功能解析
2019/09/04 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
django中cookiecutter的使用教程
2020/12/03 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
网络工程师个人的自我评价范文
2013/10/01 职场文书
拓展策划方案
2014/06/03 职场文书
快递员岗位职责
2014/09/12 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
2015年加油站工作总结
2015/05/13 职场文书
党员证明信
2015/06/19 职场文书
导游词之天津盘山
2019/11/01 职场文书