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

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

ClassList属性有以下几种方法:

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

基本样式
[图片]

  1. 通过ClassList可以获取元素的全部类名;
    [图片]

  2. 通过ClassList.remove()可以删除元素的一个或多个类名;
    [图片]

  3. 通过ClassList.add()可以向元素添加一个或多个类名;
    [图片]

  4. 通过ClassList.lentgh可以获取到元素类名的数量;

在这里插入图片描述
5. 通过ClassList.item(x)可以获取到元素类名索引为x的类名;
[图片]

  1. 通过ClassList.toggle可以为元素切换类;
    [图片]

  2. 通过ClassList.contains(x)查看元素是否存在类名为"x"的类,有 返回true
    [图片]

捂耳听枫
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
java面试题
04-27
答：因为添加、删除和更新都涉及到了数据库的修改，而查询并未涉及到数据库修改，所以只需要定义只读，这样可以提高效率，进行更加方便的事务管理。 请你谈谈对Hibernate OR映射的理解? 答：将数据库中的每一张表...
ClassList属性
a1248001936的博客
04-10 1万+
1.ClassList属性有以下几种方法: (1)通过ClassList可以获取元素的全部类名; (2)通过ClassList.remove()可以删除元素的一个或多个类名; (3)通过ClassList.add()可以向元素添加一个或多个类名; (4)通过ClassList.lentgh可以获取到元素类名的数量; (5)通过ClassList.item(x)可以获取到元素类名索引为x的类名; (6)通过ClassList.toggle可以为元素切换类; (7)通过ClassList.cont
原生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 2470
改变某HTML元素样式，有多种方法，各有优缺。推荐方法二：通过添加或切换元素的类来改变其样式。 方法一：改变内联样式 优点： 不需要考虑兼容性； 代码量少； 缺点： 每执行一句element.style.styleName = " ";，都会重新进行一次整个页面的渲染，在网络拥堵的情况下效果巨差，不符合异步更新策略。因此不推荐使用。 <style> .b1{ width:100px; height:100px; backgr
classList
高高的博客
08-09 1531
一、其实事情的发展就像切水果 如果我们把元素的类名操作比作“切水果”游戏的话，其中一个单独的类名就好比“水果”或“炸弹”！ DOM Level 2时代，类名的获取与设置，多半使用className属性，className的生效近似切水果的“一刀切”。在web的初期，交互什么的其实很简单的来；就像切水果刚开始的时候，一次就一个水果飞上来，一刀“咔嚓”切了就好，就像使用classN
华西网源码
07-06
社区下拉菜单那的活动链接和第二版一样，可以添加一个自定义的DIY调用，或者手动修改也行 3.其他的就根据自己的情况调整一下链接什么的即可 2）门户修改 1.门户头部导航修改我已经在上面说过了，文件是...
xheditor-1.1.14
08-07
方法1：利用class属性来初始化和传递各种初始化参数，例： class="xheditor {skin:'default'}" 方法2：利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数，例： $('#elm1').xheditor(); ...
JS classList.add和className
wwy6191的博客
09-29 463
classList是直接修改一个节点的类名，classList.add()则是添加一个类名，对之前的内容不做修改。
remove函数 html,classList.remove是从HTMLCollection中删除元素？
weixin_35692916的博客
06-19 1304
我遇到与JavaScript的新班级列表API一些非常奇怪的行为，说我们有以下的HTML代码：classList.remove是从HTMLCollection中删除元素？Lorem IpsumLorem Ipsum而且下面的JavaScript代码：var elements = document.getElementsByClassName("testing");alert(elements.le...
classList.add() ,classList.contains(),classList.remove(),classList.toggle()
weixin_42270374的博客
07-09 2092
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()
u011200562的博客
11-03 3798
原生js操作元素类名 classList.add( newClassName )； classList.toggle( className )； classList.remove( oldClassName )； classList.contains( oldClassName ); classList.add( newClassName )； 添加新的类名，如已经存在，取消添加 classList.contains( oldClassName ); 确定元素中是否包含指定的类名，返回值.
下拉菜单的实现classList.add() classList.remove() class属性的添加和删除
weixin_34390105的博客
07-10 3390
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; ...
原生js—classList.add()、classList.remove()
Kimser
07-22 942
原生js——操作类名（HTML5新增classList） classList.add( newClassName )； 添加新的类名，如已经存在，取消添加 classList.contains( oldClassName ); 确定元素中是否包含指定的类名，返回值为true 、false； classList.remove( oldClassName )； 移除已经存在的类名; classList.toggle( className )； 如果classList中存在给定的值，删除它，否则，添加它
深入学习js的classList
最新发布
杜永康的博客
04-03 7102
classList 是 JavaScript 中一个用于操作元素类名的东西，这个东西有很多好用的方法，可以让我们轻松地添加、删除、切换和检查元素的类名。接下来我们详细学习一下 classList 的使用方法以及相关方法。classList 是一个非常实用的工具，可以让我们轻松地操作元素的类名。在使用 classList 时，我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名；
Element.classList属性
levinhax的博客
08-04 1757
Element.classList是一个只读属性，它返回元素的类名，作为DOMTokenList对象，该元素用于在元素中添加，移除及切换CSS类。对于jQuery里的hasClass、addClass、removeClass方法我们再熟悉不过了，但我们并不是在每个项目中都会去使用jQuery。在原生js中，classList可以方便的对元素的类名进行增删改查，它的构造器是DOMTokenList，提
JS 对classList添加、删除、修改、替换
MFWSCQ的博客
05-23 8065
Element.classList是一个只读属性，返回一个元素的类属性的实时DOMTokenList集合。 相比将element.className作为以空格分隔的字符串来使用，classList是一种更方便的访问元素的类列表的方法。 语法： const elementClasses = elementNodeReference.classList; 返回值 elementClas...
classList用于添加和删除CSS类的API
cenfeng的博客
07-03 791
该classListAPI提供了原生的方式来添加，删除，切换，或检查CSS类存在的元素。它比解析容易得多element.className： 1 2 3 4 五 6 7 8 9 10 element.classList.add("someclass") //adds a class to ele...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

捂耳听枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值