ClassList属性

最新推荐文章于 2024-03-09 15:41:20 发布
最新推荐文章于 2024-03-09 15:41:20 发布
阅读量1.6w 收藏 106
点赞数 29
分类专栏： 其他 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1248001936/article/details/124078200
版权

1.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"的类;

下面通过一个例子看看如何使用

先给予它一些基本样式

通过ClassList获取元素的全部类名;

通过ClassList.remove()删除元素的一个或多个类名;

通过ClassList.add()向元素添加一个或多个类名;

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

通过ClassList.item(x)取到元素类名索引为x的类名;

通过ClassList.toggle为元素切换类,将它放在点击事件中若检测到没有color类就添加，若检测到有color类就删除

通过ClassList.contains(x)查看元素是否存在类名为"color"的类，有 返回true

a1248001936
关注
  • 29
    点赞
  • 踩
  • 106
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript高级程序设计---classList属性
zz410675629的专栏
09-07 1583
1、传统方法： 在操作类名的时候，需要通过className属性添加、删除和替换类名。如下面例子： ... 这个div中一共有三个类名，要从中删掉一个类名，需要把这三个类分别拆开，然后进行处理，处理过程如下： var className=div.className.split(/\s+/); //找到要删掉的类名 var pos=-1,
深入学习js的classList
杜永康的博客
04-03 7587
classList 是 JavaScript 中一个用于操作元素类名的东西，这个东西有很多好用的方法，可以让我们轻松地添加、删除、切换和检查元素的类名。接下来我们详细学习一下 classList 的使用方法以及相关方法。classList 是一个非常实用的工具，可以让我们轻松地操作元素的类名。在使用 classList 时，我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名；
元素属性classList
雷雨天的雷胖子
04-18 2307
目录 一、className 二、DOMTokenList 三、classList 四、classList的兼容写法 一、className 标签的class特性与其对应元素节点的className属性会互相影响，且变化会直接渲染到标签。Javascript中一般通过元素的className属性来实现标签class特性的增删该查。className属性值是一个字符串，即使只修改字符串...
原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()
陈坚泓的博客
12-03 4458
原生js操作元素类名classList.add( newClassName )；classList.contains( oldClassName );classList.remove( oldClassName )；classList.toggle( className )； classList.add( newClassName )； 添加新的类名，如已经存在，取消添加 classList.co...
classList添加、删除、修改、替换等属性
捂耳听风的博客
01-01 2433
通过ClassList.contains(x)查看元素是否存在类名为"x"的类,有 返回true。5. 通过ClassList.item(x)可以获取到元素类名索引为x的类名;通过ClassList.remove()可以删除元素的一个或多个类名;通过ClassList.add()可以向元素添加一个或多个类名;通过ClassList.lentgh可以获取到元素类名的数量;通过ClassList.toggle可以为元素切换类;通过ClassList可以获取元素的全部类名;
详解使用HTML5的classList属性操作CSS类
09-28
然而，classList属性的引入使得这些操作变得更直接、更简洁。 **classList属性的兼容性** 需要注意的是，classList属性的兼容性并不完美，尤其是对于较老的Internet Explorer浏览器（IE10以下版本）并不支持。因此...
使用HTML5里的classList操作CSS类
09-27
HTML5的classList属性是JavaScript与DOM交互的一个重要增强，它为元素节点提供了操作CSS类的原生API。这个API使得开发者可以直接、高效地管理元素的类名，而无需依赖于像jQuery这样的库来处理此类任务。classList...
CSS使用classList实现两个按钮样式的切换
09-27
在这种情况下，我们可以利用DOM（Document Object Model）的classList属性来实现按钮样式的实时切换。以下是一个关于如何使用classList来实现两个按钮样式的详细步骤和解析。 首先，HTML部分是页面的基础结构，它...
classcat:快速构建类属性字符串
05-09
该模块使从对象或CSS类名称数组构建以空格分隔的class属性字符串变得容易。 只需将每个类与一个布尔值配对即可有条件地添加或删除它们。 import cc from "classcat" export const ToggleButton = ( { isOn , ...
JS classList.add和className
wwy6191的博客
09-29 466
classList是直接修改一个节点的类名，classList.add()则是添加一个类名，对之前的内容不做修改。
classList.js: 更简单、更强大的 CSS 类管理工具
最新发布
gitblog_00007的博客
03-09 342
classList.js: 更简单、更强大的 CSS 类管理工具 该项目链接：https://gitcode.com/eligrey/classList.js?utm_source=artical_gitcode 项目简介 classList.js 是一个轻量级的 JavaScript 库，它扩展了 DOM 元素对象的 classList API 功能，使得在 Web 开发中更加方便地操作元素的 ...
classList.js
river、的博客
01-07 1130
classList.js 是一个对 JavaScript 中的 element.classList 的一个跨浏览器的实现。 如果对 element.classList 还不熟悉的可以参考MDN上的文档。 classList.js适用于IE 7或更早版本以外的所有浏览器。 CDN 使用： https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2...
js classList属性 获取/添加/移除/切换类
weixin_42448623的博客
06-03 1263
classList classList属性是 html5 新增的一个属性，返回元素的类名。ie10以上版本支持。 方法 不需加点 获取类 返回一个类数组 ele.classList 添加类 ele.classList.add('类名') 移除类 ele.classList.remove('类名') 切换类 有这个类的话 就移除 没有就添加 ele.classList.toggle('类名') ...
每日一库：classList.js
weixin_30642267的博客
02-22 112
地址：https://github.com/eligrey/classList.js 疑问： function Ctor(){ } Ctor.prototype = []; Ctor.prototype.show = function (){ console.log(this.join('')); } var c = new Ctor();...
javascript下用getElementByClassName获取css定义的类选择符（.class），兼容FF和IE
Web前端开发
10-28 3388
我们都知道在使用原生javascript时，获取类选择符时，即使用getElementByClassName，它在FF和IE下是不能兼容。FF下是可以用它获取的到元素而IE不行，相当悲催的说~所以我们想使用它就得写兼容代码让它在FF和IE下都可以达到目的。function getByClassName(className){ if(document.getElementByClassName)
决策树(Decision Tree) | 算法实现
Data Hero
09-22 4191
01 起 决策树相关的理论知识，我们在这篇文章中有详细讲解。 今天我们基于决策树原理，写一个函数来训练决策树吧。本文基于ID3算法构建决策树，此算法构建决策树的中心思想是： 始终寻找信息增益最大的特征作为当前分支的最优特征 信息增益，即：g(D,A)=H(D)-H(D|A) 02 实现思路(ID3) 利用训练数据，训练决策树，主要思路如下，共8个步骤，重点在于递归： 自定义信息熵计算函数...
classList属性的知识点
loneii的博客
06-07 509
classList属性返回元素的类名，作为DOMTokenList对象，该属性用于在元素中添加、移出、切换css类
classList
05-25
classList 是 JavaScript 中一个 DOM 元素的属性，它返回一个 DOMTokenList 对象，表示元素的类列表。该属性可以用于添加、删除、切换和检查元素的类。常用的方法包括： - add(className)：添加指定的类名，如果已存在则不重复添加。 - remove(className)：删除指定的类名，如果不存在则不操作。 - toggle(className)：如果元素存在指定的类名，则删除它；如果不存在，则添加它。 - contains(className)：检查元素是否包含指定的类名。 例如，假设有一个元素： ```html <div id="myDiv" class="foo bar"></div> ``` 则可以通过以下方式操作它的类： ```javascript const myDiv = document.querySelector('#myDiv'); myDiv.classList.add('baz'); // 添加类名：foo bar baz myDiv.classList.remove('bar'); // 删除类名：foo baz myDiv.classList.toggle('qux'); // 添加类名：foo baz qux myDiv.classList.contains('foo'); // true myDiv.classList.contains('quux'); // false ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值