JavaScript className 类名属性操作

在JavaScript中,可以通过className属性来操作HTML元素的类名。

  1. 添加类名:可以使用element.className += "className"来添加一个类名到元素中。
var element = document.getElementById("myElement");
element.className += " newClass";

  1. 移除类名:可以使用element.classList.remove("className")来移除一个类名。
var element = document.getElementById("myElement");
element.classList.remove("oldClass");

  1. 切换类名:可以使用element.classList.toggle("className")来切换一个类名,如果元素中已经包含了该类名,则移除该类名,否则添加该类名。
var element = document.getElementById("myElement");
element.classList.toggle("active");

  1. 替换类名:可以使用element.classList.replace("oldClass", "newClass")来替换一个类名。
var element = document.getElementById("myElement");
element.classList.replace("oldClass", "newClass");

  1. 检查类名:可以使用element.classList.contains("className")来检查元素是否包含指定的类名,返回一个布尔值。
var element = document.getElementById("myElement");
if (element.classList.contains("active")) {// do something
}

  1. 获取类名列表:可以使用element.classList来获取元素的所有类名列表,它返回一个DOMTokenList对象。
var element = document.getElementById("myElement");
var classList = element.classList;
console.log(classList); // DOMTokenList ["class1", "class2", "class3"]

需要注意的是,使用className属性进行类名操作会覆盖元素原有的类名,而使用classList属性进行类名操作则不会。因此,推荐使用classList属性来操作类名。

代码示例:

<div id="myElement" class="class1 class2"></div><script>var element = document.getElementById("myElement");// 添加类名element.className += " class3";// 移除类名element.classList.remove("class2");// 切换类名element.classList.toggle("active");// 替换类名element.classList.replace("class1", "newClass");// 检查类名if (element.classList.contains("active")) {// do something}// 获取类名列表var classList = element.classList;console.log(classList); // DOMTokenList ["newClass", "class3", "active"]
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/18944.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web题解 Easy_SQLi or 雏形系统 (解题方法思想)

1.Easy_SQLi 1&#xff09;打开题目环境&#xff0c;如下是一个类似弱密码的格式&#xff0c;但是它又说是sql&#xff0c;还是按sql注入来 2&#xff09;.这里我尝试判断它的注入类型&#xff0c;但是一只不对&#xff0c;我便想着用万能密码试试&#xff0c;怎料直接登录成功…

STL库--priority_queue

目录 priority_queue定义 prority_queue容器内元素的访问 priority_queue()常用函数实例解析 priority_queue内元素优先级的设置 priority_queue的常见用途 priority_queue又称为优先队列&#xff0c;其底层是用堆来进行实现的。在优先队列中&#xff0c;队首元素一定是当…

前端基础入门三大核心之JS篇:BOM基础探索 —— 窥视window对象的奥秘【含代码示例】

前端基础入门三大核心之JS篇&#xff1a;BOM基础探索 —— 窥视window对象的奥秘【含代码示例】 一、window对象&#xff1a;你的浏览器之窗基本概念作用说明 二、代码示例&#xff1a;玩转window案例一&#xff1a;简单弹窗与控制台输出案例二&#xff1a;窗口尺寸调整事件案例…

2024广东省赛 I.不等式

题目 #include <bits/stdc.h> using namespace std; #define int long long#define pb push_back#define fi first#define se second#define lson p << 1#define rson p << 1 | 1#define ll long longconst int maxn 1e6 5, inf 1e9, maxm 4e4 5, base…

全文最详细的生产管理完整方案!那些让人头疼的生产管理难题及解决方法!

什么是生产管理系统&#xff1f;为何生产管理系统在企业管理中如此重要&#xff1f;生产管理系统的核心模块包括哪些&#xff1f;为何企业在生产管理系统中常常遭遇项目信息碎片化、任务分配和跟踪困难等痛点&#xff1f;又该如何针对生产管理痛点进行优化&#xff1f; 本文40…

汽车大灯中擎耀智能控制器在车灯智能化配置下的创新与分析

随着科技的飞速发展&#xff0c;汽车工业也在不断地进行着革新。其中&#xff0c;车灯作为汽车的重要组成部分&#xff0c;其智能化配置已经成为汽车行业的一大趋势。这种趋势不仅为消费者带来了更加安全、便捷的驾驶体验&#xff0c;同时也为商家提供了丰富的商业机会。汽车工…

「异步魔法:Python数据库交互的革命」(二)

哈喽&#xff0c;我是阿佑&#xff0c;上篇文章带领了大家跨入的异步魔法的大门——Python数据库交互&#xff0c;一场魔法与技术的奇幻之旅&#xff01; 从基础概念到DB-API&#xff0c;再到ORM的高级魔法&#xff0c;我们一步步揭开了数据库操作的神秘面纱。SQLAlchemy和Djan…

【2024最新华为OD-C卷试题汇总】披萨大作战 (100分) - 支持在线评测+三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; 文章目录 前…

自动化测试实践:揭秘WebSocket在接口测试中的应用

如何写接口自动化&#xff1f;这个问题&#xff0c;但凡涉足过自动化测试的人员都能娓娓道来。Requests、urlib、jmeter、curl等等&#xff0c;不在话下。那么&#xff0c;如何获取接口的url、参数、响应等信息呢&#xff1f;&#xff01;答案就更是随口而出&#xff1a;看接口…

ts: 映射类型

映射类型会携带接口的可选和只读属性 interface User { name: string; age?: number; readonly email: string; } interface User { name: string; age?: number; readonly email: string; } type change<T> {[P in keyof T]: T[P] } type obj change<…

深入学习 torch.distributions

0. 引言 前几天分几篇博文精细地讲述了《von Mises-Fisher 分布》, 以及相应的 PyTorch 实现《von Mises-Fisher Distribution (代码解析)》, 其中以 Uniform 分布为例简要介绍了 torch.distributions 包的用法. 本以为已经可以了, 但这两天看到论文 The Power Spherical dist…

microk8s 报错tls: failed to verify certificate: x509:

问题&#xff1a; ssh命令出现如下图所示 输入任何microk8s的容器命令几乎都是x509报错 kubectl get pods -ALL 原因&#xff1a; 证书过期 相关文档&#xff1a; MicroK8s - 服务和端口 Microk8S v1.24 - refresh-certs 似乎无法刷新证书 问题 #3241 规范/microk8s Git…

【Linux系统】--- Linux内核日志等级详解

在编程的艺术世界里&#xff0c;代码和灵感需要寻找到最佳的交融点&#xff0c;才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里&#xff0c;我们将共同追寻这种完美结合&#xff0c;为未来的世界留下属于我们的独特印记。 【Linux系统】--- Linux内核日志等级详解…

Linux开放防火墙端口

1、防火墙开放3306端口 firewall-cmd --zonepublic --add-port3306/tcp --permanent2、关闭防火墙 service iptables stop3、开启防火墙 service iptables start4、开机不自启防火墙 chkconfig --del iptables5、重启防火墙 chkconfig iptables on或者 firewall-cmd --re…

yuv420转yuv422使用neno加速的示例代码

一、使用none实现yuv420快速转换为yuv422 #include <arm_neon.h> static vs_int32_t yuv420_yuv422_conver(vs_uint8_t *p_yuv420_y, vs_uint8_t *p_yuv420_uv, vs_uint32_t yuv420_y_stride, vs_uint32_t yuv420_uv_stride, vs_int32_t width, vs_int32_t height, vs_…

HarmonyOS SDK助力中国建设银行探索金融领域创新场景

今年年初&#xff0c;中国建设银行&#xff08;以下简称建行&#xff09;手机银行首批适配HarmonyOS NEXT&#xff0c;并高效实现其应用的核心功能迁移。同时&#xff0c;建行手机银行在HarmonyOS SDK的加持下&#xff0c;充分发挥鸿蒙原生应用在原生智能方面的优势&#xff0c…

小白跟做江科大32单片机之LED流水灯

1.复制下面地址新建的工程&#xff0c;改名为3-2 LED流水灯 小白跟做江科大32单片机之LED闪烁-CSDN博客https://blog.csdn.net/weixin_58051657/article/details/139295351?csdn_share_tail%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%2213929…

python学习:python做一个用户管理系统操作mysql

今天继续学习python&#xff0c;操作mysql数据库 AI搜索&#xff1a;python做一个用户管理系统mysql 以下是过程和结果&#xff1a; import mysql.connector from mysql.connector import Error import time def connect_to_database():try:conn mysql.connector.connect(h…

Opencv图像处理技术(图像轮廓)

1图像轮廓概念&#xff1a; 图像轮廓是指图像中连续的像素边界&#xff0c;这些边界通常代表了图像中的物体或者物体的边缘。在数字图像处理中&#xff0c;轮廓是由相同像素值组成的曲线&#xff0c;它们连接相同的颜色或灰度值&#xff0c;并且具有连续性。轮廓可以用来描述和…

Java对文件的操作

文件测试 批量对文件直接增加指定后缀(原有后缀变文件名的一部分) import java.io.File;// 批量对文件直接增加指定后缀(原有后缀变文件名的一部分) public class AddFileExt {public static void main(String[] args) {String fileDir "D:\\xxx\\xxx\\xxx";Strin…