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 属性的更多相关文章

  1. 脚本化CSS类-HTML5 classList属性

    HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...

  2. HTML5实战与剖析之classList属性

    classList属性究竟是干什么的,我们先撇下classList不管.我们考虑这么一个问题,那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法.将拥有类名 ...

  3. classList属性详解

    之前我们要操作一个DOM元素的class属性,需要对这个DOM的class进行繁琐的循环判断,而现在HTML5为每个元素定义了classLlist属性,用于在元素中添加,移除及切换 CSS 类.该属性 ...

  4. html元素是否包含另外一个元素,以及classList属性

    如何判断一个元素A包含了元素B呢?如果不用contains方法的话,如何做呢? 腾讯面试的时候也出了这道题啊,当时没看dom的知识,所以一抹黑哦... 那就判断B是否为A的child喽,那也就是A是B ...

  5. html标签属性(attribute)和dom元素的属性(property)

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  6. HTML DOM对象的属性和方法

    HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...

  7. HTML DOM 的nodeType属性

    在HTML DOM中每一部分都是节点: HTML元素是元素节点 HTML中属性是属性节点 文本是文本节点 注释是注释节点 这时我们要给它区分开我们就可以使用HTML DOM的nodeType属性 no ...

  8. js 获取DOM的style属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. DOM常用的属性和方法

    之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,<JavaScript ...

随机推荐

  1. 洛谷 P1571 眼红的Medusa

    P1571 眼红的Medusa 题目描述 虽然Miss Medusa到了北京,领了科技创新奖,但是他还是觉得不满意.原因是,他发现很多人都和他一样获了科技创新奖,特别是其中的某些人,还获得了另一个奖项 ...

  2. Spark 概念学习系列之Spark 多语言编程

    不多说,直接上干货! Spark 同时支持Scala.Python.Java 三种应用程序API编程接口和编程方式, 考虑到大数据处理的特性,一般会优先使用Scala进行编程,其次是Python,最后 ...

  3. pt支持的格式

  4. CView::OnPreparePrinting

    http://technet.microsoft.com/zh-cn/subscriptions/a59dff1e(v=vs.71).aspx CView::OnPreparePrinting Cal ...

  5. ejs模板引擎的使用

    引入ejs.min.js 创建模板,以<%=jsCode%>包裹起来其余的html和html结构一样 focusTemplateData是模板使用的数据,使用$.each()方法遍历绑定数 ...

  6. HTML(超文本标记语言)的内容和理解

    由于上篇文章中提到WebMethod的Description 属性(propery)中可以使用超文本,因此就记录一篇关于超文本的文章以供参考,注意:Description=" HTML格式  ...

  7. POJ 1862 Stripies 贪心+优先队列

    http://poj.org/problem?id=1862 题目大意: 有一种生物能两两合并,合并之前的重量分别为m1和m2,合并之后变为2*sqrt(m1*m2),现在给定n个这样的生物,求合并成 ...

  8. 【LCS】POJ1458Common Subsequence

    题目链接:http://poj.org/problem?id=1458 这是一道最长公共子序列的模板题: #include<iostream> #include<string> ...

  9. 《从零開始学Swift》学习笔记(Day 63)——Cocoa Touch设计模式及应用之单例模式

    原创文章,欢迎转载.转载请注明:关东升的博客 什么是设计模式.设计模式是在特定场景下对特定问题的解决方式.这些解决方式是经过重复论证和測试总结出来的. 实际上.除了软件设计,设计模式也被广泛应用于其它 ...

  10. java学习笔记之基础语法(一)

    1.java语言基础由关键字.标识符.注释.常量和变量.运算符.语句.函数和数组等组成. 2.1关键字 定义:被java语言赋予了特殊含义的单词 特点:关键字中所有的字母都是小写. 2.2用于定义数据 ...