ClassList属性

已于 2022-08-23 10:00:43 修改
阅读量2.1k 收藏 4
点赞数
分类专栏： 原生HTML学习 js方法 文章标签： 前端classList属性
于 2022-08-23 09:55:10 首次发布
原文链接：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"的类;

案例

var prop = document.getElementById(‘myPopup’);
prop.classList.toggle(‘show’);

详情查看博主

MFG_666
关注
专栏目录
DOM基础，classList属性提供的方法和属性，DOM中节点的操作，追加节点
m0_73849466的博客
10-31 1147
DOM基础概念，classList属性提供的方法和属性的种类，DOM中节点的操作的方式，追加节点的方式和方法
详解使用HTML5的classList属性操作CSS类
09-28
然而，classList属性的引入使得这些操作变得更直接、更简洁。 **classList属性的兼容性** 需要注意的是，classList属性的兼容性并不完美，尤其是对于较老的Internet Explorer浏览器（IE10以下版本）并不支持。因此...
classList的用法
热门推荐
qq_37304197的博客
08-16 1万+
假设 var a = document.getElementBy("DIV"); 1.使用classList返回所选元素的类名，是一个数组，一个类名占一个长度(a.classList.length)。 2.a.classList.add("classname1") ; 添加一个类名 3.a.classList.remove("classname2") ; 去掉一个类名 4.a.clas..
元素的classList属性怎么用
weixin_30502965的博客
01-18 246
查看HTML元素的classList元素将返回类型为DOMTokenList的对象，所以我们要研究的是该对象的属性和方法。 该类型的对象描述了一个用空格分隔的字符串数组，数组的每一项代表该元素的一个类名。HTMLElement.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relL...
classList用法
dianzhuanpeng5760的博客
03-21 268
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>classList</title> <style type="text/css"> ...
CSS使用classList实现两个按钮样式的切换
12-29
classList属性的方法：add();remove();toggle(); 描述，在一些页面我们需要使用两个按钮来回切换，如图： 我们要使用到add()和remove()方法 html部分: <div class=login-title> 注册 登陆 js部分:
js实现class样式的修改、添加及删除的方法
10-24
使用classList属性 现代浏览器提供了`Element.classList`属性，该属性包含元素的所有class，并提供了一系列便捷的方法来操作它们。 - **classList.add("class")：** 添加一个或多个class。 - **classList.remove...
classList属性，class样式列表和操作方法
sohighthesky
06-05 682
firefox3.6新增(目前2010-6-5貌似没有其它浏览器支持)HTMLElement.classList属性 方便 了对class样式的操作 [code="html"]test[/code] [code="js"] var test=document.getElementById("test"); if('classList' in test){ var cl=...
JavaScript classList() 属性和方法解释
allway2的博客
06-05 7589
属性是 HTML 元素的一个属性，它保存当前选定元素的类名。您可以使用该属性将 HTML 元素的类名作为数组获取。例如，假设您的标签中有以下 HTML 元素： 您可以使用该方法获取上面的元素，然后您可以使用or属性获取元素的类名。属性以字符串形式返回类名，而属性以数组形式返回类名： 该属性是只读属性。如果要操作 HTML 元素的类，则需要使用属性中包含的方法。它们如下：让我们从方法开始了解这些方法是如何工作的。该方法允许您向元素添加一个或多个类名。您只需要将要添加的类名作为逗号分隔的字符串传递：
c++ listClass 介绍
11-12
c++ listClass 介绍，某大学课件，英文
classList
weixin_30267697的博客
04-17 186
classlist 是HTML推出简化操作dom类的api 兼容方面 pc上的兼容不是很好 但是移动端基本没有什么问题 提供了一些的API：length、item、add、remove、contains、toggle 实例 <div id='2' class="a b c "> </div> length返回元素长度 <script type...
获取class列表属性方法
at sea
06-20 880
获取class列表属性方法 classList length : class的长度 add() : 添加class方法 remove() : 删除class方法 toggle() : 切换class方法 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse
html里list属性的值,HTML5新增属性：classList属性的使用方法
weixin_32120857的博客
06-04 305
本篇文章给大家带来的内容是关于HTML5新增属性：classList属性的使用方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。HTML5中新增了classList属性，用于实现对class的操作，其API如下：contains(value)：判断名为value的类名是否存在add(value)：添加名为value的类名remove(value)：删除名为value的类名togg...
classList添加、删除、修改、替换等属性
捂耳听风的博客
01-01 2893
通过ClassList.contains(x)查看元素是否存在类名为"x"的类,有 返回true。5. 通过ClassList.item(x)可以获取到元素类名索引为x的类名;通过ClassList.remove()可以删除元素的一个或多个类名;通过ClassList.add()可以向元素添加一个或多个类名;通过ClassList.lentgh可以获取到元素类名的数量;通过ClassList.toggle可以为元素切换类;通过ClassList可以获取元素的全部类名;
27、 classList 属性
weixin_45998542的博客
12-18 324
27、 classList 属性 classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。 该属性用于在元素中添加，移除及切换 CSS 类。有以下方法 添加类： element.classList.add（’类名’）； focus.classList.add('current'); 移除类： element.classList.remove（’类名’）; focus.classList.remove('current'); 切换类： element.classList
使用HTML5的classList属性操作CSS类
weixin_34405557的博客
10-11 265
前言 以前我们有需要用js或jquery的一些方法hasClass、addClass、removeClass，在一个元素的class属性上添加或者删除某几个类，达到某种样式变化的需求，但还是稍微麻烦了一些。h5新增的classList可以让我们更方便的元素的类名进行操作。 注意 classList兼容性有些差，不兼容ie10以下的ie浏览...
classList属性进行操作
最新发布
10-19
`classList` 是 JavaScript 中的一个DOM API 属性，它用于操作HTML元素的类列表，即元素上应用的一系列CSS类名集合。通过 `classList`，你可以执行如添加、删除、切换、检查类等操作： 1. 添加类（`.add()`）：向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值