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

最新推荐文章于 2025-03-06 19:58:54 发布

原创最新推荐文章于 2025-03-06 19:58:54 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了使用HTML5新增的classList API操作元素类名的方法，包括add、contains、remove、toggle和replace等函数的使用技巧。

部署运行你感兴趣的模型镜像

原生js——操作类名（HTML5新增classList）

classList.add( newClassName )；

添加新的类名，如已经存在，取消添加

classList.contains( oldClassName );

确定元素中是否包含指定的类名，返回值为true 、false；

classList.remove( oldClassName )；

移除已经存在的类名;

classList.toggle( className )；

如果classList中存在给定的值，删除它，否则，添加它；

classList.replace( oldClassName，newClassName )；

类名替换
来看几个例子：
有一个div

您可能感兴趣的与本文相关的镜像

ACE-Step

音乐合成

ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Kimser

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

JavaScript中如何移除元素的类（Class）

TechSavant的博客

10-06

2556

要在JavaScript中移除元素的类（Class），我们可以使用Element对象的classList属性和remove方法。classList属性返回一个DOMTokenList对象，它表示元素的类列表，可以用于添加、删除和切换类。该方法接受一个类名作为参数，并返回一个布尔值，指示元素是否包含该类。方法从该元素的类列表中移除了一个类名为"myClass"的类。方法中传递多个参数，每个参数代表一个要移除的类名。另外，如果我们想要检查元素是否具有特定的类，可以使用。除了移除类和检查类的存在，

JavaScript实现选项卡功能（面向过程与面向对象）

qq_45799465的博客

02-07

1719

面向过程注意： ul>li 标签属性中的index属性值是串联起ol>li与ul>li的关键，通过调用相同索引下标的数组中的不同属性的属性值达到切换内容的效果。通过事件委托找到对应的ul>li 进行css属性的删除与新增做到背景颜色改变和内容改变的效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-

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

JavaScript基础——87.添加和删除类名【classList.ad 和 classList.remove】

weixin_63215361的博客

03-06

979

/ 2.删除类名,如果要删除的类名没有，也不会出错。classList.remove（类表删除函数）classList（class类，List表）// 1.添加类名,已有相同类名，不会添加。classList.add（类表添加函数）

原生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中存在给定的值，删除它，否则，添加它...

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

MFWSCQ的博客

05-23

1万+

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

JS原生实现css动画切换避免使用.style来直接添加样式，请使用classList.add代替

weixin_51116314的博客

02-22

917

项目背景首先我想实现这么一个侧边栏效果直接一个hover就能实现可是我想添加一个效果，就是点击右上角的收回按钮可以锁定住侧边栏，这样鼠标移开就不会自动收回了贴上代码（也可以点目录跳至问题描述）代码 HTML <div class="imageList-container movable"> <div id="pullback"><svg t="1613860886171" class="icon" viewBox="0 0 1024 1024" versio

document.documentElement.classList.add作用，怎么用

03-21

好的，我现在需要帮助用户了解如何在JavaScript中使用document.documentElement.classList.add方法。用户已经提供了一些相关的引用内容，我需要结合这些信息来构建一个清晰的回答。首先，我应该回顾用户提供的引用...

inputElement.classList.add('disabled-style'); 要怎么移除disabled-style

06-25

在JavaScript中，可以使用classList.remove()方法来移除特定的类。步骤：1.获取input元素2.使用classList.remove('disabled-style')移除指定的类示例代码：```javascript//获取input元素，假设其id为'key'...

前端项目-classlist.zip

09-03

2. **方法映射**：定义四个核心方法（`add`、`remove`、`toggle`和`contains`），并确保它们的行为与原生`classList`接口一致。 3. **兼容性检查**：在初始化时检测当前浏览器是否原生支持`classList`，如果不支持，...

document .getElementById("username") .parentElement() .classList.add("error"); 查找bug

最新发布

08-12

在使用原生 JavaScript 操作 DOM 时，如果希望通过父元素添加错误样式来标识输入错误，但发现 `document.getElementById("username").parentElement().classList.add("error")` 无法正常工作，问题可能出在对 `...

JS classList.add和className

wwy6191的博客

09-29

585

classList是直接修改一个节点的类名，classList.add()则是添加一个类名，对之前的内容不做修改。

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

orange_girls的博客

07-07

895

classList

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

Dcripple的博客

10-23

3832

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

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

m0_47892636的博客

03-24

892

javascript中类名的操作方法

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

weixin_42270374的博客

07-09

2829

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

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

陈坚泓的博客

12-03

5014

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

深入学习js的classList

杜永康的博客

04-03

1万+

classList 是 JavaScript 中一个用于操作元素类名的东西，这个东西有很多好用的方法，可以让我们轻松地添加、删除、切换和检查元素的类名。接下来我们详细学习一下 classList 的使用方法以及相关方法。classList 是一个非常实用的工具，可以让我们轻松地操作元素的类名。在使用 classList 时，我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名；

原生js新增的classList如何使用？

weixin_51609337的博客

07-26

869

.classList顾名思义,用于操作类名的。 1. .classList.add( ):给元素添加类名，若已存在，则不进行添加操作 2..classList.remove( ):元素移除已存在的类名。 3. .classList.toggle( ):若元素存在该类名则移除，不存在则添加 4..classList.contains( ）：若元素存在该类名返回true，不存在返回false。 ...