当前位置： 首页 > article >正文

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

article 2025/8/17 10:23:15

1、classList
classList属性是一个只读属性，返回元素的类名，作为一个DOMTokenList集合(用于在元素中添加，移除及切换css类)

length:返回类列表中类的数量，该属性是只读的

<style>
    .lis {
        width: 200px;
        height: 100px;
        background-color: skyblue;
    }

    .box {
        width: 100px;
        height: 100px;
        border: 1px solid #e15671;
    }
    .red {
        background: red;
    }
    .width {
        width: 200px;
    }
</style>
<body>
    <ul>
        <li class="lis red width">111</li>
    </ul>
    <div class="box"></div>
</body>
<script>
    let box = document.querySelector('.box');
    let list = box.classList;
    console.log(list.length);//1
    console.log(list);//DOMTokenList ['box', value: 'box']

    let lists = document.querySelector(".lis");
    let len = lists.classList;
    console.info(len.length);//3
    console.info(len);//DOMTokenList(3) ['lis', 'red', 'width', value: 'lis red width']

</script>
 

2、classList.add(className1,className2…);
添加一个或多个类名，如果指定的类名存在，则不添加

    <style>
        .mystyle {
            width: 300px;
            height: 50px;
            background-color: skyblue;
            color: white;
            font-size: 25px;
        }
        
           .once{
            padding: 20px;
            border: 2px solid orange;
        }
    </style>
    <body>
        <button οnclick="myFun()">点我</button>
        <div id="boss">
            我是一个 div
        </div>
    </body>
    <script>
        //添加一个类样式
        function myFun() {
            let divCla = document.getElementById("boss");
            let style = divCla.classList.add("mystyle");
        }
        
        //添加两个及两个以上类样式 类名用逗号','隔开
        function myFun() {
            let divCla = document.getElementById("boss");
            let style = divCla.classList.add("mystyle","once");
        }
    </script>
 

3、classList.contains(className);
判断指定的类名是否存在，返回布尔值(true:存在；false:不存在)

    <style>
        .lis {
            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
        .red {
            background: red;
        }

        .width {
            width: 200px;
        }
    </style>
    <body>
        <ul>
            <li class="lis red width">111</li>
        </ul>
    </body>
    <script>
        let lis = document.getElementsByClassName("lis")[0];
        let style = lis.classList.contains('red');
        console.log(style);//true 存在类名

        let style1 = lis.classList.contains('height');
        console.log(style1);//false
    </script>

4、classList.item(index);
返回索引值对应的类名 [索引值在区间范围外 返回null]

    <style>
        .lis {
            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
        .red {
            background: red;
        }
        .width {
            width: 200px;
        }
    </style>
    <body>
        <ul>
            <li class="lis red width">111</li>
        </ul>
    </body>
    <script>
        //第一个类名 根据索引查询
        let lis = document.getElementsByClassName("lis")[0];
        let className = lis.classList.item(0);
        console.log(className);//lis
        //第二个类名
        let className2 = lis.classList.item(1);
        console.log(className2);//red
            
    </script>
 

5、classList.remove(className1,className2…);
移除一个或多个类名 [移除不存在的类名，不会报错]

    <style>
        .mystyle {
            width: 300px;
            height: 50px;
            background-color: skyblue;
            color: white;
            font-size: 25px;
        }
        
        .once{
            padding: 20px;
            border: 2px solid orange;
        }
    </style>
    <body>
        <button οnclick="myFun()">点我</button>
        <div id="boss" class="mystyle">
            我是一个 div
        </div>
    </body>
    <script>
        function myFun() {
            let box = document.querySelector('#boss');
            let list = box.classList.remove("mystyle");
            
            // 移除不存在的类名 不会报错
            //let box = document.querySelector('#boss');
            //let list = box.classList.remove("once");
        }

    </script>
 

6、classList.toggle(className[, true | false]);
切换类名；

第一个参数为要移除的类名，并返回false；若该参数不存在则添加类名，返回true

第二个参数为布尔值，设置是否强制添加或移除类，不论类名是否存在

    <style>
        .mystyle {
            width: 300px;
            height: 50px;
            background-color: skyblue;
            color: white;
            font-size: 25px;
        }
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #e15671;
        }
    </style>
    <body>
        <button οnclick="myFun()">点我</button>
        <div id="boss" class="mystyle">
            我是一个 div
        </div>
    </body>
    <script>
        function myFun() {
            //添加类名
            let box = document.querySelector('#boss');
            let list = box.classList.toggle("box");
            //给两个值的时候
            //移除类名
            let removeList = box.classList.toggle('mystyle',false);
            //添加类名
            let addList = box.classList.toggle('box',true);
        }
    </script>

7、classList.replace( oldClassName，newClassName );
替换类名，返回布尔值,true表示替换成功

第一个参数为被替换的类名

第二个参数为要替换的新类名

    <style>
        .mystyle {
            width: 300px;
            height: 50px;
            background-color: skyblue;
            color: white;
            font-size: 25px;
        }
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #e15671;
        }
    </style>
    <body>
        <button οnclick="myFun()">点我</button>
        <div id="boss" class="mystyle">
            我是一个 div
        </div>
    </body>
    <script>
        function myFun() {
            let box = document.querySelector('#boss');
            let replace = box.classList.replace('mystyle','box');
        }
        
    </script>

相关文章：

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

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

编程日记 2025/7/6 17:32:43

抽象工厂模式深度解析：从原理到与应用实战

作者简介 我是摘星&#xff0c;一名全栈开发者&#xff0c;专注 Java后端开发、AI工程化 与 云计算架构 领域&#xff0c;擅长Python技术栈。热衷于探索前沿技术&#xff0c;包括大模型应用、云原生解决方案及自动化工具开发。日常深耕技术实践&#xff0c;乐于分享实战经验与…...

编程日记 2025/8/15 11:58:10

35.成功解决编写关于“江协科技”编写技巧第二期标志位积累的问题

江科大学长又发布了第二期的编写技巧&#xff01; 大家可以看看&#xff1a;https://space.bilibili.com/383400717 最后面给了一个未完成的任务&#xff1a; 这里我已经把这个问题给解决了&#xff01; 总代码放在资源里面&#xff0c;key.c放在文章最后面&#xff01;同时感…...

编程日记 2025/8/17 6:51:56

Linux常用命令学习手册

Linux常用命令学习手册https://download.csdn.net/download/2401_87690752/90953550 《Linux常用命令学习手册》提供了一份实用的Linux操作指南&#xff0c;主要收录了系统管理和文件操作等基础命令。内容涵盖了目录切换、文件查看、权限设置等核心功能&#xff0c;适合Linux初…...

编程日记 2025/7/25 0:35:10

Tailwind CSS 实战：基于 Kooboo 构建 AI 对话框页面（八）：异步处理逻辑详解

在现代 Web 应用中&#xff0c;异步处理是实现流畅交互的核心技术。本文基于前几章实现的内容Tailwind CSS 实战&#xff1a;基于 Kooboo 构建 AI 对话框页面&#xff08;七&#xff09;&#xff1a;消息框交互功能添加-CSDN博客&#xff0c;深入解析 AI 对话框页面中异步逻辑的…...

编程日记 2025/8/9 21:29:40

Unreal从入门到精通之 UE4 vs UE5 VR性能优化实战

文章目录 前言：准备工作UE4 vs UE5 性能对比引擎核心技术方案对比UE5 优化总结项目设置可伸缩性组设置VolumetricCloud最后前言： 最近在使用UE5制作VR项目 制作完后发现，我们的场景一直很卡顿，场景优化也做到了极致，但是帧率最高也才30+ 但是我们看到一个竞品，他的帧率竟…...

编程日记 2025/8/10 1:50:58

COMSOL与MATLAB联合仿真人工智能的电学层析成像系统

关键词&#xff1a;MATLAB&#xff0c;电学层析成像&#xff0c;人工智能&#xff0c;图像重建&#xff0c;深度学习 一、引言 基于人工智能的电学层析成像系统是一种创新的检测技术&#xff0c;结合了电学层析成像技术与人工智能算法的优势。电学层析成像技术&#xff0c;简…...

编程日记 2025/8/12 1:41:52

配置sudo免密却不生效的问题

如图&#xff0c;我配置了dhcp4这个账号sudo免密&#xff0c;但是执行sudo的时候还是要输密码。 查看dhcp的用户组&#xff0c;是配置了一个wheel组&#xff0c;而wheel组配置的是需要密码。 我们用dhcp4用户执行sudo -l 发下他匹配了两条命令策略&#xff0c;一个是免密一个…...

编程日记 2025/8/14 15:56:21

大模型赋能：金融智能革命中的特征工程新纪元

一、AI进化论&#xff1a;从“判别”到“生成”的金融新战场 1.1 判别式AI的“痛点”与大模型的“破局” 想象这样一幅画面&#xff1a;银行风控模型像老式收音机&#xff0c;需要人工反复调试参数才能捕捉风险信号&#xff1b;而大模型则是智能调音台&#xff0c;能自动“听…...

编程日记 2025/8/16 6:46:42

Significant Location Change

一、Significant Location Change是什么 “Significant Location Change&#xff08;重大位置变化&#xff09;” 是苹果 iOS 系统中一项用于在应用未主动运行时&#xff0c;监测设备位置显著变化的功能。它主要通过基站、Wi-Fi 网络等信号来判断设备是否发生了有意义的位置移…...

编程日记 2025/7/23 3:31:16

springboot 微服务 根据tomcat maxthread 和 等待用户数量，达到阈值后，通知用户前面还有多少用户等待，请稍后重试

我们在java项目开发中&#xff0c;如何设置服务器最大负载&#xff0c;过了服务器承受范围之后&#xff0c;提示用户稍后重试&#xff0c;避免 服务器无法提供正常服务 如何设置服务器负载比如&#xff1a;最大线程数&#xff0c;等待数量等,请看&#xff1a;springtomcat 用户…...

编程日记 2025/7/6 20:57:10

LHA9924芯片可代替AD7190，CS5530

LHA9924是一款高性能、单芯片模数转换器(ADC)。该器件包括一个低噪声可编程增益放大器(PGA)、Δ-Σ调制器和数字滤波器。该ADC支持两种运行模式&#xff0c;可在功耗与分辨率之间实现最佳平衡。双通道多路复用器可以选择外部信号测量和内部ADC测试信号。具有使输入电路短路来测…...

编程日记 2025/8/12 23:23:03

短视频矩阵系统技术saas源头6年开发构架

在短视频内容爆发式增长的今天&#xff0c;短视频矩阵系统SAAS技术成为企业快速搭建视频平台的关键解决方案。本文将系统解析从技术源头到服务落地的全流程开发路径。 一、系统定义与技术基础 短视频矩阵系统是集视频上传、智能编辑、多端分享、高清播放于一体的综合性平台。其…...

编程日记 2025/8/10 12:01:02

枫之谷Artale端午节大当机----后端技术的巨大风险

枫之谷Artale在端午节活动造成大量玩家上线塞爆&#xff0c;进不去&#xff0c;甚至在最后时段大当机&#xff0c;造成数万玩家怒火。 这体现了后端技术的影响&#xff0c;它不像是前端技术只对少数人造成影响&#xff0c;只要一出事&#xff0c;就是大批的玩家一起面对崩溃的伺…...

编程日记 2025/7/7 13:18:42

前端删除评论操作（局部更新数组）

​评论的删除是局部删除&#xff0c;把所点击的评论id号传递给后端&#xff0c;通知后端在数据库中删除数据&#xff0c;并且返回数据&#xff0c;但是在前端并不直接接收返回的数据&#xff0c;而是触发回调事件&#xff0c;在前端上进行删除评论&#xff0c;首先通过pId观察他…...

编程日记 2025/8/9 8:03:49

数学复习笔记 28

前言 刷数学题非常爽啊。让我感觉自己能考一百四&#xff0c;一百五这种错觉。我和一个朋友说&#xff0c;我肯定能考一百四以上&#xff0c;他说他觉得我最多考一百二&#xff0c;笑死&#xff0c;我是这么菜的么。下面是线代第六章的例题的一些理解。我现在觉得考研数学不需…...

编程日记 2025/8/12 1:18:08

Delphi 实现远程连接 Access 数据库的指南

方法一&#xff1a;通过局域网共享 Access 文件&#xff08;简单但有限&#xff09; 步骤 1&#xff1a;共享 Access 数据库 将 .mdb 或 .accdb 文件放在局域网内某台电脑的共享文件夹中。 右键文件夹 → 属性 → 共享 → 启用共享并设置权限&#xff08;需允许网络用户读写&a…...

编程日记 2025/8/16 16:54:40

在线OJ项目测试

一.项目简介 1.1项目背景 历史起源&#xff1a;最早的OJ系统&#xff08;如UVa、POJ&#xff09;是为国际大学生程序设计竞赛&#xff08;ICPC&#xff09;等赛事开发的&#xff0c;用于自动评判参赛者的代码正确性和效率。 需求场景&#xff1a;竞赛需要公平、高效的评分系统…...

编程日记 2025/8/10 18:26:22

C++ --- vector

C --- vector的使用 前言1、构造函数1.1默认构造1.2n个val值构造1.3迭代器区间构造1.4拷贝构造1.4初始化列表构造 2、遍历方式2.1[ ] 下标2.2迭代器2.3范围for 3、常用方法或重载&#xff08;1&#xff09;增push_back()insert()assign() &#xff08;2&#xff09;删erase()c…...

编程日记 2025/8/9 22:09:39

【python基础知识】变量名和方法名的单下划线（_）和双下划线（__）总结

文章目录 1. 单下划线前缀&#xff08;_variable 或 _method()&#xff09;2. 双下划线前缀&#xff08;__variable 或 __method()&#xff09;3. 前后双下划线&#xff08;__variable__ 或 __method__&#xff09;4. 单下划线&#xff08;_&#xff09;单独使用总结 在 Python…...

编程日记 2025/7/7 13:58:19

FART 脱壳某大厂 App + CodeItem 修复 dex + 反编译还原源码

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ FART 脱壳 fartthread 方法在 app 启动的时候&#xff08;ActivityThread&#xff09;开启 fart 线程&#xff0c;休眠 60 秒&#xff0c;等待 app 启动完成后…...

编程日记 2025/8/6 5:26:56

✅ 常用 Java HTTP 客户端汇总及使用示例

在 Java 开发中&#xff0c;HTTP 客户端是与服务端交互的关键组件。随着技术发展&#xff0c;出现了多种 HTTP 客户端库&#xff0c;本文汇总了常用的 Java HTTP 客户端&#xff0c;介绍其特点、适用场景&#xff0c;并附上简单使用示例&#xff0c;方便开发者快速选择和上手。…...

编程日记 2025/8/16 9:29:36

快速用 uv 模拟发布一个 Python 依赖包到 TestPyPI 上，以及常用命令

目录 1. uv 介绍2. uv 安装&#xff08;Windows版&#xff09;3. 快速模拟一个要发布到TestPyPI上的依赖包&#xff0c;scoful-test-lib3.1 初始化 uv init3.2 进入scoful-test-lib3.3 修改pyproject.toml3.4 使用命令 uv sync3.5. 使用命令 uv lock3.6 使用命令 uv build3.7 获…...

编程日记 2025/8/6 19:23:32

Keil调试模式下，排查程序崩溃简述

在Keil调试模式下&#xff0c;若程序崩溃&#xff0c;可以通过以下步骤来定位崩溃的位置&#xff1a; 一、查看调用栈&#xff08;Call Stack&#xff09; 打开调用栈窗口&#xff1a; 在Keil的调试模式下&#xff0c;点击菜单栏的“View” -> “Call Stack Window”&…...

编程日记 2025/7/9 6:47:50

Python读取PDF：文本、图片与文档属性

在日常的数据采集、文档归档与信息挖掘过程中&#xff0c;PDF格式因其版式固定、内容稳定而被广泛使用。Python 开发者若希望实现 PDF 内容的自动化提取&#xff0c;选择一个易用且功能完善的库至关重要。本文将介绍如何用Python实现 PDF文本读取、图片提取 以及 文档属性读取 …...

编程日记 2025/8/5 7:01:35

基于SpringBoot+Vue2的租房售房二手房小程序

角色&#xff1a; 管理员、房东、租客/买家 技术&#xff1a; springbootvue2mysqlmybatispagehelper 核心功能&#xff1a; 租房售房小程序是一个专注于房屋租赁和销售的综合性平台&#xff0c;基于SpringBootVue2MySQLMyBatisPageHelper技术栈开发&#xff0c;为用户提供…...

编程日记 2025/8/13 12:19:11

数学：学好数学需要对数系进行系统的对比和分析

数系范围：自然数通常是从 0 或 1 开始，用于计数的数，然后整数包括正负和零，有理数是分数，实数包括无理数，复数引入虚数单位。 运算性质：比如是否满足加法、乘法的封闭性，是否有逆元，是否有序，完备性等。 结构对比：比如代数结构，比如自然数是半群，整数是环，有理…...

编程日记 2025/7/28 8:06:29

基于本地LLM与MCP架构构建AI智能体全指南

一、AI智能体开发的新范式 随着人工智能技术的快速演进&#xff0c;AI智能体&#xff08;AI Agents&#xff09;正成为连接技术创新与实际应用的核心载体。从智能家居的温控系统到复杂的金融风控决策&#xff0c;AI智能体通过感知环境并执行目标导向的行为&#xff0c;正在重塑…...

编程日记 2025/8/10 21:28:06

AT2659_GNSS低噪声放大器芯片

AT2659 射频放大器在SiGe工艺平台上实现23dB增益与0.71dB噪声系数的优异组合&#xff0c;专为BDS/GPS/GLONASS/GALILEO多模导航系统优化设计。其宽电压适应能力&#xff08;1.4-3.6V&#xff09;与低至4.4mA的功耗特性&#xff0c;配合1.5mm1mm0.55mm的6脚DFN封装&#xff08;R…...

编程日记 2025/8/14 9:16:14

跨平台游戏引擎 Axmol-2.6.1 发布

Axmol 2.6.1 版本是一个以错误修复和功能改进为主的次要LTS长期支持版本 &#x1f64f;感谢所有贡献者及财务赞助者&#xff1a;scorewarrior、peterkharitonov、duong、thienphuoc、bingsoo、asnagni、paulocoutinhox、DelinWorks 错误修复 修复Android armv7架构崩溃问题&…...

编程日记 2025/7/12 1:04:58