classList

在早期的时候要添加,删除类 需要用className去获取,然后通过正则表达式去判断这个类是否存在。

代码上去会有点麻烦,现在有了classList 就方便了很多。

————————————————————————————————————————————————————

定义和用法

classList 属性返回元素的类名,作为 DOMTokenList 对象。

该属性用于在元素中添加,移除及切换 CSS 类。

classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。

var len = document.body.classList.length;//静态属性。获取元素类名的个数

document.body.classList.add('class_a,class_b,class_c');//方法。用于添加元素的类(class_a),接受多个参数,

document.body.classList.remove('class_a');//方法。用于删除元素的类(class_a),接受多个参数。和add一样

document.body.classList.contains('class_a'); //返回true或者false  方法。用于检测元素是否包含某个类(class_a),返回Boolean值。

//toggle
//方法。这个家伙是add、remove、contains的结合,不仅能检测元素是否包含某个类,而且还具备增删功能,即如果存在某个类,
// 就remove掉,如果不存在,就add一下。返回一个Boolean值。 //如果body不存在 class_a 的类名,就会给body增加一个 class_a 的类
document.body.classList.toggle('class_a'); //true

//再执行一遍,class_a已被删除了
document.body.classList.toggle('class_a'); //false

更多详细请参照 : http://www.runoob.com/jsref/prop-element-classlist.html

ps: 推荐一个学习前端的文档网站(HTML CSS JS) MDN: https://developer.mozilla.org/zh-CN

学习前端的菜鸡对JS 的classList理解的更多相关文章

  1. 学习前端的菜鸡对JS的call,apply,bind的通俗易懂理解

       call,apply,bind 在JavaScript中,call.apply和bind是Function对象自带的三个方法,都是为了改变函数体内部 this 的指向.            a ...

  2. 一个数学不好的菜鸡的快速沃尔什变换(FWT)学习笔记

    一个数学不好的菜鸡的快速沃尔什变换(FWT)学习笔记 曾经某个下午我以为我会了FWT,结果现在一丁点也想不起来了--看来"学"完新东西不经常做题不写博客,就白学了 = = 我没啥智 ...

  3. 菜鸡谈OO 第一单元总结

    “OOP永远是我的好朋友爸爸!” ——来自某无能狂怒的菜鸡 身处在OO的第一个摸鱼黄金周中的我,感觉到了巨大的满足感.如果写博客这种充满意义的事情可以代替我们亲爱的作业,那么我提议每周来两个:)下面开 ...

  4. ACM菜鸡退役帖——ACM究竟给了我什么?

    这个ACM退役帖,诸多原因(一言难尽...),终于决定在我大三下学期开始的时候写出来.下面说两个重要的原因. 其一是觉得菜鸡的ACM之旅没人会看的,但是新学期开始了,总结一下,只为了更好的出发吧. 其 ...

  5. 前端迷思与React.js

    前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这 ...

  6. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  7. WebView全面学习(二)-- Native与js双方通信

    WebView全面学习(二)-- Native与js双方通信 Native与js通信的本质 Native与js通信的核心在于WebView. 两端的通信主要还是单向的.假如要完成js->Nati ...

  8. 初学者应该怎么学习前端?web前端的发展路线大剖析!

    写在最前: 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用 ...

  9. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

随机推荐

  1. web 复制功能和span光标

    参考文章:https://www.cnblogs.com/tugenhua0707/p/7395966.html https://blog.csdn.net/woshinia/article/deta ...

  2. python内置函数 eval()、exec()以及complie()函数

    1.eval函数 eval() 函数用来执行一个字符串表达式,并返回表达式的值. eval(expression[, globals[, locals]]) 参数 expression -- 表达式. ...

  3. windows与linux环境查看jdk安装路径

    windows: set java_home 查看jdk安装路径 java -version 查看jdk版本 linux: whereis java which java(java执行路径) echo ...

  4. Python之类属性的增删改查

    #类属性又称为静态变量,或者是静态数据,这些数据是他们所属的类对象绑定的,不依赖于任何类实例 class ChinesePeople: country = 'china' def __init__(s ...

  5. PYTHON-进阶-装饰器小结,转载

    本文转载自:http://www.wklken.me/posts/2012/10/27/python-base-decorator.html 基本概念 具体概念自己google 装饰器是一个很著名的设 ...

  6. jquery实现背景图片动态适应

    背景 在我的一个项目中用到了背景图片,发现其中有一个问题,当页面长度动态变化时,原来能占满全部内容背景的图片会变得不能占满全部背景.如下图的效果: 这是正常的,背景图片占满全屏 当页面内容变长出现了滚 ...

  7. clientdataset 用法

    http://www.360doc.com/content/10/0709/01/2071424_37769962.shtml

  8. oc NSLog输出格式大全

    本文的内容是总结了一下iOS开发中NSLog输出格式大全,虽然比较基础,但有总结毕竟会各位正在学习iOS开发的朋友们一些小小的帮助. %@                   对象 %d, %i    ...

  9. 第一个gulp程序

    说起来惭愧,一直用公司内部的工具,没有用这些红得发紫的东西.今天东抄西拼终于搞出第一个gulp应用.gulp是做什么的,好处在哪儿我不废话了.直入主题吧. 先在D盘下建立一个xxxx目录,然后打开控制 ...

  10. javascript获取事件源对象和产生事件的对象

    事件源对象是指event对象,其封装了与事件相关的详细信息,比如按键状态. 获取事件源对象的方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...