• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 如何用js判断dom是否有存在某class的值

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

作者:孟然 字体:[增加 减小] 来源:互联网 时间:2017-05-11

孟然通过本文主要向大家介绍了js给dom添加class,js获取dom对象,js的dom,js获取dom,js创建dom等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

例如:

<html class="no-js">
<head>
</head>
<body>
</body>
</html>
</div>

判断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;
 }
})
</div>

2.js的实现方式

function hasClass(element, cls) {
 return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
hasClass(document.querySelector("html"), 'no-js');
</div>

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") ) ;
</div>

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-05-11js实现返回顶部效果
  • 2017-05-11基于JQuery的购物车添加删除以及结算功能示例
  • 2017-05-11angular仿支付宝密码框输入效果
  • 2017-05-11JavaScript两个变量交换值的实现方法
  • 2017-05-11JS跨域请求外部服务器的资源
  • 2017-05-11jQuery实现的省市联动菜单功能示例【测试可用】
  • 2017-05-11深入理解JavaScript中的预解析
  • 2017-05-11JavaScript中动态向表格添加数据
  • 2017-05-11原生js仿淘宝网商品放大镜效果
  • 2017-05-11AngularJS实现页面定时刷新

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 简单实现bootstrap选项卡效果
    • js实现九宫格的随机颜色跳转
    • JavaScript判断浏览器及其版本信息
    • AngularJS的脏检查深入分析
    • 微信小程序 本地数据读取实例
    • 正则表达式基本语法及表单验证操作详解【基于JS】
    • nodejs入门教程三:调用内部和外部方法示例
    • JavaScript中undefined和null的区别
    • JS+HTML5实现上传图片预览效果完整实例【测试可用】
    • Javascript封装id、class与元素选择器方法示例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有