js classList属性 获取/添加/移除/切换类

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

classList

classList属性是 html5 新增的一个属性，返回元素的类名。ie10以上版本支持。

方法

不需加点

获取类
返回一个类数组

ele.classList

添加类

ele.classList.add('类名')

移除类

ele.classList.remove('类名')

切换类
有这个类的话 就移除 没有就添加

ele.classList.toggle('类名')
tianmeng1999
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解使用HTML5的classList属性操作CSS类
09-28
- 添加类：`element.classList.toggle("classToAdd", true);` - 移除类：`element.classList.toggle("classToRemove", false);` 4. **检查类是否存在**： `classList.contains()`方法用于检测元素是否包含特定的...
使用HTML5里的classList操作CSS类
09-27
classList对象包含了几个实用的方法，帮助我们轻松地完成添加、删除、检查和切换CSS类的操作。 1. `length`属性：这个属性返回元素上CSS类的数量。通过检查这个值，我们可以知道元素有多少个类名。 2. `add()`方法...
classList 添加、删除、切换类名
热门推荐
qq_41853417的博客
10-23 1万+
classList 返回元素得类名 <div class="one two"></div> <script> window.addEventListener('load', function() { var div= document.querySelector('div'); console.log(div.classList) console.log(div.classList[0]) }) </script> <div class
classList详解，让你的js方便地操作DOM类
Preserve
01-16 3286
在此之前，jQuery的hasClass、addClass、removeClass我们已经再熟悉不过了，然而我们并不会在每一个项目中都会去使用jQuery或者Zepto，譬如在移动端的网页中，考虑到传说中的性能和静态资源的请求量等因素，我们通常会选择采用原生js，而对于元素的class操作。你首先想到的就是className，这位伙计完美地得到了包括ie6在内的所有古现代浏览器的支持，尽管它的功能
原生js中使用classList操作class
海涛高软
02-18 649
实现按下鼠标，为某个元素添加一个类 松开鼠标，将某个元素去掉一个类 最终实现 鼠标按下，换颜色，松开，恢复默认颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .fontSize { font-size: 5..
classList使用
liubangbo的专栏
03-22 1013
classList 属性返回元素的类名，作为 DOMTokenList 对象。 该属性用于在元素中添加，移除及切换 CSS 类。 classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。 下面我们通过一个例子来看看怎么使用classList <!DOCTYPE html> <html lang="en"> <head...
javascript14--classlist
lxhby520的博客
05-22 355
classlist&lt;style&gt; body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;} ol,ul,li{margin:0;padding:0;list-style:none;} img{border:none;vertical-align:top;} .box{ width:100px ; heig...
使用classList来实现两个按钮样式的切换方法
08-28
同时，`classList`还提供了`toggle()`方法，可以用来在存在时移除类，不存在时添加类，这对于更复杂的交互场景也非常有用。总之，理解和掌握`classList`对于任何前端开发者来说都是非常有价值的技能。
CSS使用classList实现两个按钮样式的切换
09-27
值得注意的是，classList还有`toggle()`方法，它可以在存在时移除类，不存在时添加类，这也可以用于简化上述代码，但为了保持清晰的逻辑，这里没有使用。 总结来说，这个示例展示了如何使用CSS和JavaScript（特别是...
基于JavaScript实现类名的添加与移除
10-19
本文主要讲解两种方法来实现类名的添加、移除以及切换功能：通过`className`属性和使用`classList` API。 ### 方法1：使用`className`属性 `className`属性是JavaScript中获取或设置元素类名的常用方式。它返回一...
16、ES5
weixin_30404405的博客
03-07 86
支持ES5的浏览器 Opera 11.60+ Internet Explorer 9+ (IE9不支持严格模式) Firefox 4+ Safari 5.1+ Chrome 13+ 一、页面加载顺序及事件 （一）页面加载顺序 1、解析HTML结构。 2、加载外部脚本和样式表文件。 3、 解析并执行脚本代码。 4、DOM树构建完成。(获取元素) ==>DOMCon...
使用js对class(类名)增删改查的好办法，不要只用会className和jQuery啦
m0_47974640的博客
01-24 5263
js修改样式的方法 1、对象.className(‘类名’) 2、setAttribute(),getAttribute()和removeAttribute() 3、JQuery的addClass()、removeClass() 使用js来对类名进行增删改查以便到达我们需要的功能，这是一个很实用的操作。 但当我们需要设置多个类名时，原生的可能比较多人熟知的className()就不能用了，因为它会覆盖，不能在原有的类名上增加，很鸡肋！ 原生js的setAttribute()
原生js操作元素类名(classList,classList.add...)
Dcripple的博客
10-23 2950
1、classList classList属性是一个只读属性，返回元素的类名，作为一个DOMTokenList集合(用于在元素中添加，移除及切换css类) length:返回类列表中类的数量，该属性是只读的 <style> .lis { width: 200px; height: 100px; background-color: skyblue; } .box { width: 100px;
通过Js更改元素标签类名
tuoniaoxs的博客
04-27 8571
通过JS代码更改html等语言的元素标签的类名 前言 在写html等前端页面时，我们会用到各种标签元素，配合js代码可以实现验证、变化等效果。在JS的编写中，我们有三种方法可以改变元素的类名，如下。 1、setAttribute() setAttribute()方法是创建或者改变元素的某个属性，我们可以利用这个方法对元素的类名进行更改。具体方法是这样的 el.setAttribute(“class”,“classname”) <div id="box"></div> <scri
Js 和 Jq 添加类、删除类 和 切换类
weixin_52306994的博客
03-11 952
setAttribute()方法是创建或者改变元素的某个属性el.setAttribute("class","classname")不仅可以使用classList.toggle()方法在修改切换类，也可以使用setAttribute()方法。看了这些，小伙伴是不是有这样的疑惑呢？怎样才能兼容所有浏览器呢。$(当前对象). addClass("类名")
classList添加、删除、修改、替换等属性
捂耳听风的博客
01-01 2581
通过ClassList.contains(x)查看元素是否存在类名为"x"的类,有 返回true。5. 通过ClassList.item(x)可以获取到元素类名索引为x的类名;通过ClassList.remove()可以删除元素的一个或多个类名;通过ClassList.add()可以向元素添加一个或多个类名;通过ClassList.lentgh可以获取到元素类名的数量;通过ClassList.toggle可以为元素切换类;通过ClassList可以获取元素的全部类名;
深入学习js的classList
杜永康的博客
04-03 8075
classList 是 JavaScript 中一个用于操作元素类名的东西，这个东西有很多好用的方法，可以让我们轻松地添加、删除、切换和检查元素的类名。接下来我们详细学习一下 classList 的使用方法以及相关方法。classList 是一个非常实用的工具，可以让我们轻松地操作元素的类名。在使用 classList 时，我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名；
classList用于添加和删除CSS类的API
cenfeng的博客
07-03 801
该classListAPI提供了原生的方式来添加，删除，切换，或检查CSS类存在的元素。它比解析容易得多element.className： 1 2 3 4 五 6 7 8 9 10 element.classList.add("someclass") //adds a class to ele...
js 获取元素类名以及添加删除指定类名element.classList.toggle()
黄大仙
08-11 1739
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg { background-color: black; } </style> </head> <body> &l.
js中怎么往选择器里面添加class类
最新发布
09-08
在JavaScript中可以使用classList属性来往选择器中添加类。 classList是一个DOM元素的属性，它提供了一些方法来添加、移除或切换元素的类。 要向选择器中添加类，需要先通过选择器获取到对应的DOM元素，然后使用classList属性进行操作。 首先，可以使用querySelector或querySelectorAll方法来选择需要操作的DOM元素。例如， ```javascript var element = document.querySelector(".selector"); // 选择器可以是类选择器、id选择器或标签选择器 ``` 接下来，可以使用classList的add方法向该DOM元素中添加类。例如， ```javascript element.classList.add("new-class"); // 添加名为"new-class"的类 ``` 如果需要添加多个类，可以连续调用add方法。例如， ```javascript element.classList.add("class1", "class2", "class3"); // 添加多个类 ``` 另外，classList还提供了remove方法用于移除类，toggle方法用于在类存在时移除，不存在时添加，和contains方法用于判断元素是否包含某个类。例如， ```javascript element.classList.remove("class-to-remove"); // 移除名为"class-to-remove"的类 element.classList.toggle("class-to-toggle"); // 切换名为"class-to-toggle"的类的状态 var hasClass = element.classList.contains("check-class"); // 判断是否包含名为"check-class"的类，返回true或false ``` 通过classList属性的这些方法，可以实现向选择器中添加类的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值