classList用于添加和删除CSS类的API

最新推荐文章于 2023-04-03 17:38:31 发布
最新推荐文章于 2023-04-03 17:38:31 发布
阅读量800 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40338373/article/details/94584804
版权

该classListAPI提供了原生的方式来添加，删除，切换，或检查CSS类存在的元素。它比解析容易得多element.className：

1

2

3

4

五

6

7

8

9

10

element.classList.add("someclass") //adds a class to element<font></font>

element.classList.add("class1", "class2", etc) //adds multiple CSS classes. Not supported in IE11 or FF26 or less.<font></font>

<font></font>

element.classList.remove("someclass") //removes a class from element<font></font>

element.classList.remove("class1", "class2", etc) //removes multiple CSS classes. Not supported in IE11 or FF26 or less.<font></font>

<font></font>

element.classList.toggle("someclass") //toggles a class. If already exists removes and returns false. Otherwise adds class and returns true<font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

element.classList.toggle（“someclass”，expression）//根据表达式的结果添加或删除“someclass”。</font><font style="vertical-align: inherit;">IE11或FF26或更低版本不支持。</font></font><font></font>

<font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

element.classList.contains（“someclass”）//检查元素中是否存在类</font></font>

cenfeng.top
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
display=“none“和“classList.remove“ 方法的区别
L19541216的博客
06-05 574
需要注意的是，“display” 属性修改的是元素的 CSS 样式，而 “classList.remove” 方法修改的是元素的类名列表。因此，如果存在其他基于类名的样式规则或者通过类名来实现交互效果，使用 “classList.remove” 方法可以更好地与现有的样式和交互逻辑进行集成。从本质上讲，“display” 属性直接控制元素的显示和隐藏，而 “classList.remove” 方法是通过操作元素的类名列表，从而影响元素的样式来实现显示和隐藏。
元素class类名的添加和删除之classList
这个昵称没有被占用吧的博客
11-20 6454
相信很多人都知道通过element.className的方式给元素添加class属性或获取元素的class属性。本文要介绍的HTML DOM classList是也可用于给元素添加、移除或切换class属性。 classList的基本使用： 一、语法： element.classList 返回的是一个DOMTokenList类数组对象。 二、属性： length 返回类列表中类的数量 value...
HTML5 classList 操作类名
白瑕 的博客
09-28 1361
使用HTML5 classList在JS中操作类名 文章目录使用HTML5 classList在JS中操作类名前言一、classList.add()二、classList.remove()三、classList.replace()四、classList.toggle()五、classList.contains()总结 前言 今天遇到一个需求,需要在每次点击的时候触发CSS动画,但是按照以往的经验(走的弯路),一个CSS动画在触发一次之后,如果不做出改动,下次再触发就播放不了了. 比如给一个按钮添加一个点
深入学习js的classList
杜永康的博客
04-03 7874
classList 是 JavaScript 中一个用于操作元素类名的东西，这个东西有很多好用的方法，可以让我们轻松地添加、删除、切换和检查元素的类名。接下来我们详细学习一下 classList 的使用方法以及相关方法。classList 是一个非常实用的工具，可以让我们轻松地操作元素的类名。在使用 classList 时，我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名；
JS 对classList添加、删除、修改、替换
MFWSCQ的博客
05-23 8504
Element.classList是一个只读属性，返回一个元素的类属性的实时DOMTokenList集合。 相比将element.className作为以空格分隔的字符串来使用，classList是一种更方便的访问元素的类列表的方法。 语法： const elementClasses = elementNodeReference.classList; 返回值 elementClas...
使用HTML5里的classList操作CSS类
09-27
classList对象包含了几个实用的方法，帮助我们轻松地完成添加、删除、检查和切换CSS类的操作。 1. `length`属性：这个属性返回元素上CSS类的数量。通过检查这个值，我们可以知道元素有多少个类名。 2. `add()`方法...
todo-list:使用HTML，CSS和JavaScript制作的简单清单
04-06
2. CSS基础：CSS用于美化页面，例如设置背景色、字体样式、边距和填充，以及使用选择器如类选择器（`.class`）和ID选择器（`#id`）来定位并应用样式。在待办事项清单中，CSS可以用来设计列表的样式，如任务项的高亮...
jQuery左右列表添加删除代码.zip
最新发布
11-02
《jQuery左右列表添加删除功能详解》 在网页开发中，我们常常需要实现用户交互功能，例如在左右两个列表之间移动项目，或者实现项目的添加与删除。jQuery作为一个强大的JavaScript库，为开发者提供了丰富的API和...
一个MutationObserver类似于CSS选择器的API
08-10
const newClass = mutation.target.classList; // 处理新的class } }); }); observer.observe(element, { attributes: true, attributeFilter: ['class'] }); // 当不再需要观察时 // observer.disconnect(); ...
5种 CSS 和 JS 的交互方式
07-16
它包括`add()`, `remove()`, 和 `toggle()`方法，分别用于添加类、删除类和根据存在与否切换类。这个API在现代浏览器中得到了广泛支持，但在旧版本的IE浏览器中，需要从IE10开始才能使用。 3. **直接操作样式表**：...
jQ+CSS3列表项添加删除效果
12-05
非常实用的删除效果，简洁大方！适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。
css classlist,JS classList属性的使用
weixin_29426299的博客
08-03 725
使用元素的 classList 属性可以访问或添加、删除及修改元素的 class 属性。需注意的是，支持 classList 属性的浏览器主要是一些较新版的，例如：IE10+、Firefox3.6+。使用 classList 属性访问 class 属性的格式如下：element.classListclassList 是一个只读属性，其返回的值为 DOMTokenList，其中包含了元素的所有 cl...
js的classList
qq_52845451的博客
07-07 5423
js的classList简单汇总
动态添加删除class名
weixin_61963601的博客
12-30 288
【代码】动态添加删除class名。
JS 基础 API(新选择器、Element.classList、自定义属性 DATA-)
weixin_42235173的博客
06-04 450
5. JS 基础 API 5.1. 新选择器 JavaScript在HTML5中多了一套原生选择器API 其功能类似jQuery选择器 写法上类似原本的document.getElementById(‘xxx’) var element1 = document.getElementById('section1'); √ 已经get var elements2 = document.getEle...
classList属性配合内置方法add()、remove()、toggle()，添加或删除某个类，以此改变CSS样式
Julienling的博客
04-04 2513
改变某HTML元素样式，有多种方法，各有优缺。推荐方法二：通过添加或切换元素的类来改变其样式。 方法一：改变内联样式 优点： 不需要考虑兼容性； 代码量少； 缺点： 每执行一句element.style.styleName = " ";，都会重新进行一次整个页面的渲染，在网络拥堵的情况下效果巨差，不符合异步更新策略。因此不推荐使用。 <style> .b1{ width:100px; height:100px; backgr
classList添加、删除、修改、替换等属性
捂耳听风的博客
01-01 2521
通过ClassList.contains(x)查看元素是否存在类名为"x"的类,有 返回true。5. 通过ClassList.item(x)可以获取到元素类名索引为x的类名;通过ClassList.remove()可以删除元素的一个或多个类名;通过ClassList.add()可以向元素添加一个或多个类名;通过ClassList.lentgh可以获取到元素类名的数量;通过ClassList.toggle可以为元素切换类;通过ClassList可以获取元素的全部类名;
便捷地添加或去除class--classList
Meskjei的博客
03-19 996
在开发中，经常碰到需要为某个DOM节点添加或去除一个class的情况。 在这种情况下，要移除一个class，一般的做法是拿到DOM节点的className属性，然后将其拆分成数组。然后遍历数组元素找到要移除的属性然后将该项删除，把数组重新拼成字符串然后重新设置DOM节点的className属性。代码如下： //假设div变量是一个DOM对象，'foo'是要移除的class let classNam...
element.classList属性及方法应用
sky_jser
10-24 9116
element.classList属性用于返回一个元素的className集合，并且该属性拥有add，remove，toggle，contains方法，详见：https://developer.mozilla.org/en-US/docs/DOM/element.classList。 一般我们再操作dom节点的className时经常会有以下4个需求： 判断该节点是否存在某个class
css classlist
05-13
CSS classList 是一个 DOM API，用于在元素上添加、删除和检查类。classList 属性返回一个 DOMTokenList 对象，它是一个类似数组的对象，其中包含当前元素的所有类，可以使用它的方法来添加、删除和检查类。 class...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值