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 ...
随机推荐
- amazeui学习笔记一(开始使用4)--Web App 相关
amazeui学习笔记一(开始使用4)--Web App 相关 一.总结 1.桌面图标(Touch icon)解决方案:终极方案:link标签的rel和href属性: <link rel=&qu ...
- css中的!important作用
css中的!important作用 一.总结 1.!important:是hack, 2.!important作用:让浏览器首选执行这个语句,当对同一个对象设置了多个同类型的属性的时候,首选执行这一个 ...
- JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max
<script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...
- 【博客之星】CSDN2013博客之星--分析和预测
本文纯属个人见解,多有得罪啊! 具体结果,还是看最后CSDN给的结果吧! 昵称 名字 题材 质量 数量 知名度 预测 阳光岛主 杨刚 Python,Clojure,SAE 很高 346+ 很大 一定( ...
- amazeui学习笔记--css(HTML元素5)--表格Table
amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名 <table class="am-table"& ...
- LaTeX indicator function(指示函数)(\mathbb {1} 不起作用)
问题说明: \mathbb字符的空心化显示仅对字符有效,对数字无效. 解决方法: 使用 bbm 包 \documentclass{article} \usepackage{bbm} \begin{do ...
- js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- jQuery常用的API
1.jQuery给标签添加子元素(父子关系) jQuery对象.append("子"); 将div标签插入到ul标签之后 $("ul").append($('d ...
- PHP Web木马扫描器代码
<?php header('content-type:text/html;charset=gbk'); set_time_limit(0);//防止超时 /** * * php目录扫描监控增强版 ...
- 21、IIS声卡驱动程序
声卡芯片的数据通道一般都是IIS接口,但是控制音量等控制信息的接口都不相同 (新内核在linux-3.4.2\sound\soc\codecs\uda134x.c) uda134x_codec_pro ...