DOM 的classList 属性
1.添加1个或多个class
add(class1, class2, ...)
2.移除class
remove(class1, class2, ...)
3.判断指定的类名是否存在
contains(class)
true - 元素包已经包含了该类名
false - 元素中不存在该类名
4.在元素中切换类名。
toggle(class, true|false)
第一个参数为要在元素中移除的类名,并返回 false。
如果该类名不存在则会在元素中添加类名,并返回 true。
第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在。例如:
移除一个 class: element.classList.toggle("classToRemove", false);
添加一个 class: element.classList.toggle("classToAdd", true);
注意: Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。
5.返回类名在元素中的索引值
item(index)
返回类名在元素中的索引值。索引值从 0 开始。
如果索引值在区间范围外则返回 null
文末福利:
福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880
福利二:微信小程序入门与实战全套详细视频教程:https://www.jianshu.com/p/e8197d4d9880
领取方式:
如果需要学习视频,欢迎关注 【编程微刊】微信公众号,回复【领取资源】一键领取以下所有干货资源,获取更多有用技术干货、文档资料。所有文档会持续更新,欢迎关注一起成长!
作者:喜欢坑队友的程序员
链接:https://www.jianshu.com/p/eb7ed959d481
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
DOM 的classList 属性的更多相关文章
- 脚本化CSS类-HTML5 classList属性
HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...
- HTML5实战与剖析之classList属性
classList属性究竟是干什么的,我们先撇下classList不管.我们考虑这么一个问题,那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法.将拥有类名 ...
- classList属性详解
之前我们要操作一个DOM元素的class属性,需要对这个DOM的class进行繁琐的循环判断,而现在HTML5为每个元素定义了classLlist属性,用于在元素中添加,移除及切换 CSS 类.该属性 ...
- html元素是否包含另外一个元素,以及classList属性
如何判断一个元素A包含了元素B呢?如果不用contains方法的话,如何做呢? 腾讯面试的时候也出了这道题啊,当时没看dom的知识,所以一抹黑哦... 那就判断B是否为A的child喽,那也就是A是B ...
- html标签属性(attribute)和dom元素的属性(property)
简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...
- HTML DOM对象的属性和方法
HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...
- HTML DOM 的nodeType属性
在HTML DOM中每一部分都是节点: HTML元素是元素节点 HTML中属性是属性节点 文本是文本节点 注释是注释节点 这时我们要给它区分开我们就可以使用HTML DOM的nodeType属性 no ...
- js 获取DOM的style属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DOM常用的属性和方法
之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,<JavaScript ...
随机推荐
- CISP/CISA 每日一题 11
CISA 每日一题(答) 一个合理建造的数据仓库应当支持下列三种基本的查询格式: 1.向上溯源和向下溯源——向上溯源是对数据进行总计:向下溯源是将数据进行细化: 2.交叉溯源——通过通用属性访问数据仓 ...
- JavaScript学习总结(6)——js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框 [javascript] view plaincopy //====================== JS最常用三种弹出对话框 =================== ...
- URL短地址压缩算法 微博短地址原理解析 (Java实现)
原博客地址:http://blog.csdn.net/xyz_lmn/article/details/8057270 最近,项目中需要用到短网址(ShortUrl)的算法,于是在网上搜索一番,发现有C ...
- 洛谷 P2640 神秘磁石
P2640 神秘磁石 题目背景 在遥远的阿拉德大陆,有一种神秘的磁石,是由魔皇制作出来的, 题目描述 1.若给他一个一维坐标系,那么他的磁力一定要在素数坐标的位置上才能发挥的最大(不管位置坐标的大小, ...
- 怎样将OpenStack部署到Hadoop
随着信息时代的快速发展,大数据技术和私有云环境都非常实用;只是,假设将两者结合在一起.企业会获得巨大的利润.虽然结合两者会让环境变得更复杂.企业仍然能够看到将 OpenStack 私有云和 Apach ...
- 3lession-python编程规范
今天继续学习python,内容主要就是python编程过程中的一些规范,包括注释.换行等 1.注释 所有的注释都是以#开头,注释可以单独占有一行,也可以放到语句的末尾.因为python没有多行注释,所 ...
- 7.zookeeper集群搭建(windows环境下)
转自:https://www.cnblogs.com/xuxiuxiu/p/5868481.html 本次zk测试部署版本为3.4.6版本,下载地址http://mirrors.cnnic.cn/ap ...
- Spark SQL概念学习系列之DataFrame与RDD的区别
不多说,直接上干货! DataFrame的推出,让Spark具备了处理大规模结构化数据的能力,不仅比原有的RDD转化方式更加简单易用,而且获得了更高的计算性能.Spark能够轻松实现从MySQL到Da ...
- Python 极简教程(四)变量与常量
变量和常量 在 Python 中没有 常量 与 变量 之分.只有约定成俗的做法: 全大写字母的名称即为 常量: PI = 3.1415926 全小写字母的名称为 变量: name = 'nemo' 变 ...
- The Swift Programming Language 中文翻译版
原文(http://www.cnblogs.com/lkvt/p/3765349.html) 一.Welcome to Swift 1.关于Swift Swift是一种用于iOS和OS X应用的全新编 ...