javascript中类名的操作方法classList.add(),classList.remove(),classList.toggle(),classList.contains()

最新推荐文章于 2025-04-17 09:27:29 发布

莺飞草长二月天

最新推荐文章于 2025-04-17 09:27:29 发布

阅读量758

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/m0_47892636/article/details/136978596

版权

本文介绍了JavaScript中DOM元素classList对象的三个主要方法：用于添加类的`classList.add()`,移除类的`classList.remove()`,以及检查类存在的`classList.contains()`。这些方法在处理HTML元素样式时非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elem.classList.add(class) —— 添加类
elem.classList.remove(class) —— 移除类。
elem.classList.toggle(class) —— 如果类不存在就添加类，存在就移除它。
elem.classList.contains(class) —— 检查给定类，返回 true/false。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

莺飞草长二月天

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

原生js—classList.add()、classList.remove()、classList.contains()、classList.toggle()、

代码小宝宝的博客

02-21

4万+

原生js添加、移除类名（HTML5新增classList） classList.add()；添加新的类名，如已经存在，取消添加 classList.contains(); 确定元素中是否包含指定的类名，返回值为true 、false； classList.remove()；移除已经存在的类名; classList.toggle()；如果classList中存在给定的值，删除它，否则，添加它...

classList属性配合内置方法add()、remove()、toggle()，添加或删除某个类，以此改变CSS样式

Julienling的博客

04-04

2923

改变某HTML元素样式，有多种方法，各有优缺。推荐方法二：通过添加或切换元素的类来改变其样式。方法一：改变内联样式优点：不需要考虑兼容性；代码量少；缺点：每执行一句element.style.styleName = " ";，都会重新进行一次整个页面的渲染，在网络拥堵的情况下效果巨差，不符合异步更新策略。因此不推荐使用。 <style> .b1{ width:100px; height:100px; backgr

参与评论您还未登录，请先登录后发表或查看评论

js中怎么使用classList属性修改元素的class样式

m0_68094390的博客

05-20

1830

举个例子，如下为一个按钮点击事件，点击按钮时触发add()方法添加类名addStyle，再次点击时调用remove()方法移除类名addStyle。

原生js操作元素类名(classList,classList.add...)

Dcripple的博客

10-23

3609

1、classList classList属性是一个只读属性，返回元素的类名，作为一个DOMTokenList集合(用于在元素中添加，移除及切换css类) length:返回类列表中类的数量，该属性是只读的 <style> .lis { width: 200px; height: 100px; background-color: skyblue; } .box { width: 100px;

JS用 `classList` 修改样式：轻松控制元素样式的技巧

m0_62599305的博客

02-28

908

classList。

classList.add() ,classList.contains(),classList.remove(),classList.toggle()

weixin_42270374的博客

07-09

2730

HTML5新增classList classList.add(newclass); 添加新的类名 classList.contains(oldClassName); 确定元素中是否包含指定的类名，返回值为true 、false； classList.remove( oldClassName )；移除已经存在的类名 classList.toggle( className )；如果classList中存在给定的值，删除它，否则，添加它； classList.replace(...

JS 对classList添加、删除、修改、替换

MFWSCQ的博客

05-23

9783

Element.classList是一个只读属性，返回一个元素的类属性的实时DOMTokenList集合。相比将element.className作为以空格分隔的字符串来使用，classList是一种更方便的访问元素的类列表的方法。语法： const elementClasses = elementNodeReference.classList; 返回值 elementClas...

03JavaScript类名操作完全指南：从className到classList的华丽升级

最新发布

前端基地

04-17

499

想学前端交互技巧吗？这里深入剖析className和classList属性，结合addEventListener事件监听，实现元素类名动态控制。有简单示例助你理解，像点击按钮改变元素样式。掌握这些，你能轻松打造出交互性强、体验佳的前端页面！

前端项目-classlist.zip

09-03

element.classList.add('active'); // 添加类名 'active' element.classList.remove('inactive'); // 移除类名 'inactive' element.classList.toggle('highlight', true); // 强制添加类名 'highlight' console.log...

使用HTML5里的classList操作CSS类

09-27

例如，`myDiv.classList.add('myCssClass')`将添加'myCssClass'到myDiv元素的类列表中。也可以一次性添加多个类，如`myDiv.classList.add('class1', 'class2')`，但要注意，多个类之间需要用逗号分隔，而不是空格，...

``` document.getElementById("mySidebar").classList.add("active"); ```代码：

04-04

- 它提供了一组便捷的方法来操作类名列表，例如 `.add()`、`.remove()` 和 `.toggle()`。 ### 3. **`.add("active")`:** - `.add()` 是 `classList` 提供的一个方法，用来向目标元素的类列表中新增加一个类名...

this.classlist.toggle('active');

09-01

this.classList.toggle('active') 是一段javascript代码，它的作用是切换元素的class属性中是否包含active这个类名。具体来说，classlist是一个DOM元素的属性，它返回一个DOMTokenList对象，代表元素的class属性值...

原生js—classList.add()、classList.remove()、classList.contains()、classList.toggle()

orange_girls的博客

07-07

837

classList

classList添加、删除、修改、替换等属性

捂耳听风的博客

01-01

3351

通过ClassList.contains(x)查看元素是否存在类名为"x"的类,有返回true。5. 通过ClassList.item(x)可以获取到元素类名索引为x的类名;通过ClassList.remove()可以删除元素的一个或多个类名;通过ClassList.add()可以向元素添加一个或多个类名;通过ClassList.lentgh可以获取到元素类名的数量;通过ClassList.toggle可以为元素切换类;通过ClassList可以获取元素的全部类名;

原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()

陈坚泓的博客

12-03

4823

原生js操作元素类名classList.add( newClassName )；classList.contains( oldClassName );classList.remove( oldClassName )；classList.toggle( className )； classList.add( newClassName )；添加新的类名，如已经存在，取消添加 classList.co...

原生js—classList.add()、classList.remove()

Kimser

07-22

1116

原生js——操作类名（HTML5新增classList） classList.add( newClassName )；添加新的类名，如已经存在，取消添加 classList.contains( oldClassName ); 确定元素中是否包含指定的类名，返回值为true 、false； classList.remove( oldClassName )；移除已经存在的类名; classList.toggle( className )；如果classList中存在给定的值，删除它，否则，添加它

ClassList属性