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 ...
随机推荐
- 3/19 Django框架 url路由配置及模板渲染
3/19 Django框架 url路由配置及模板渲染 1.路由分配 URL(Uniform Resoure Locato):统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示, ...
- Eclipse中Git插件使用技巧:[5]还原文件
如果修改了某个文件并未提交至本地库(add index),那么怎么还原呢?Git插件中并不像Svn插件直接提供有还原方式.其实无论是否提交至本地库或者远程库,还原操作的本质都是将文件的当前版本还原至之 ...
- opera mini 7.5安卓改服版
opera mini 7.5安卓改服版Opera mini 7.5安卓版前两天发布了,试着进行改服实现***,过程跟以前的OPM7.0差不多,大家可参照我之前的博客教程Opera mini7.0改服教 ...
- JavaScript篇(一)二叉树的插入 (附:可视化)
一.二叉树概念 二叉树(binary tree)是一颗树,其中每个节点都不能有多于两个的儿子. 字节一面,第一道就是二叉树的插入,在这里其实是对于一个二叉查找树的插入. 使二叉树成为二叉查找树的性质是 ...
- 修饰器&高阶组件
一.修饰器 1.类的修饰 修饰器是一个函数,用来修改类的行为 function testable(target) { target.isTestable = true; } @testable cla ...
- HTML、XHTML、css速记
一.HTML 下面内容记录经常使用的html元素.可另存为html文件以查看效果: <!doctype html> <html lang="zh-cn"> ...
- 2013腾讯编程马拉松初赛第〇场(HDU 4504)威威猫系列故事——篮球梦
http://acm.hdu.edu.cn/showproblem.php?pid=4504 题目大意: 篮球赛假如我们现在已经知道当前比分 A:B,A代表我方的比分,B代表对方的比分,现在比赛还剩下 ...
- ThreadPoolExecutor – Java Thread Pool Example(如何使用Executor框架创建一个线程池)
Java thread pool manages the pool of worker threads, it contains a queue that keeps tasks waiting to ...
- 辛星彻底帮您解决CSS中的浮动问题
浮动,是CSS布局中必须经过的一道坎,假设不熟悉浮动.那么CSS的布局就如同空中楼阁,而谈到浮动,很多其它的是和div相结合,div是一个块级元素.这个我前面的博文有介绍,假设大家喜欢我的风格,能够搜 ...
- struts2笔记---struts2的执行过程
1.服务器启动: 加载项目web.xml 创建struts核心过滤器对象,执行filter-->init() struts-default.xml 核心功能的初始化 struts-plu ...