异常教程

HTML DOM className 属性（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，HTML DOM（文档对象模型）为开发者提供了操作网页元素的接口。而 HTML DOM className 属性 是其中最常用且功能强大的工具之一。它允许开发者通过 JavaScript 动态修改 HTML 元素的类名，从而实现样式切换、状态管理或与 CSS 框架的交互。无论是初学者还是中级开发者，掌握这一属性都能显著提升网页的交互性和灵活性。本文将从基础概念逐步深入，结合代码示例和实际场景，帮助读者全面理解 HTML DOM className 属性 的应用与技巧。

什么是 HTML DOM className 属性？

HTML DOM className 属性 是 HTML 元素对象的一个属性，用于获取或设置该元素的 class 属性值。简单来说，它充当了 HTML 元素与 JavaScript 之间的桥梁，允许开发者通过代码动态控制元素的类名。

比喻理解：

可以将 DOM 想象成一棵树，每个 HTML 元素都是树上的节点。而 className 属性 就像每个节点上的标签，通过修改标签（类名），可以触发不同的视觉或功能效果。例如，点击按钮后，标签从“未激活”变为“已激活”，对应不同的 CSS 样式。

基础操作：获取和设置类名

1. 获取元素的 className

通过 JavaScript 的 document.querySelector() 或 getElementById() 等方法获取元素后，即可通过 .className 属性读取其当前类名。

// 示例：获取 id 为 "myElement" 的元素的类名  
const element = document.getElementById("myElement");  
console.log(element.className); // 输出当前类名，如 "active red-border"

2. 设置元素的 className

直接赋值给 .className 属性即可覆盖元素原有的所有类名。

// 示例：将元素的类名设置为 "highlight"  
element.className = "highlight";

进阶用法：动态添加、删除或切换类名

在实际开发中，直接覆盖类名可能不够灵活。开发者更常需要的是 增删类名 而非完全替换。以下是几种常见操作：

1. 添加类名

通过 classList.add() 方法可以安全地为元素添加新类名，无需担心覆盖原有类。

// 示例：为元素添加 "selected" 类名  
element.classList.add("selected");

2. 移除类名

使用 classList.remove() 方法可删除指定类名。

// 示例：移除 "hidden" 类名  
element.classList.remove("hidden");

3. 切换类名

classList.toggle() 方法会根据当前类名是否存在，自动切换状态。例如，点击按钮时反转元素的 active 类名。

// 示例：点击按钮时切换 "active" 类名  
document.querySelector("#toggleButton").addEventListener("click", () => {  
  element.classList.toggle("active");  
});

实际案例：通过 className 控制样式

案例场景：按钮点击高亮

假设有一个按钮，点击时需要高亮显示（如改变背景色），松开时恢复原样。

HTML 结构：

<button id="highlightButton" class="btn">点击我</button>

CSS 样式：

.btn {  
  padding: 10px;  
  background-color: #4CAF50;  
  color: white;  
}  

.btn.active {  
  background-color: #45a049;  
  transform: scale(1.05);  
}

JavaScript 实现：

const button = document.getElementById("highlightButton");  

button.addEventListener("mousedown", () => {  
  button.className += " active"; // 添加 active 类  
});  

button.addEventListener("mouseup", () => {  
  button.classList.remove("active"); // 移除 active 类  
});

解释：

  • 当鼠标按下时，通过 += 追加类名，避免覆盖原有 btn 类。
  • 松开鼠标时，直接移除 active 类，恢复初始样式。

进阶技巧与最佳实践

1. 处理多个类名

若元素包含多个类名（如 class="user-card online"），直接操作 className 可能需要字符串拼接，容易出错。此时推荐使用 classList 方法，例如：

// 示例：检查是否存在 "online" 类名  
if (element.classList.contains("online")) {  
  // 执行相关逻辑  
}

2. 动态类名与数据绑定

在前端框架（如 Vue、React）中，类名常与状态绑定。但即使在纯 JavaScript 开发中，也可通过变量动态生成类名字符串：

let status = "success";  
element.className = `notification ${status}`; // 结果为 "notification success"

3. 兼容性与性能优化

  • 兼容性：classList 方法在 IE10 及以下版本中不支持，若需兼容旧浏览器，可改用正则表达式操作 className 字符串。
  • 性能：频繁修改类名可能影响性能，建议通过事件节流或状态管理优化。

常见问题与解决方案

Q1：为什么直接赋值 className 会覆盖原有类名？

A：className 属性返回的是一个字符串，直接赋值会完全替换当前值。若需保留原有类名，应使用 classList.add() 或字符串拼接：

element.className += " new-class"; // 注意：可能在末尾添加空格  
// 更安全的方式：  
element.classList.add("new-class");

Q2：如何同时添加多个类名？

A：classList.add() 支持多个参数：

element.classList.add("class1", "class2", "class3");

Q3：如何根据条件动态选择类名？

A：使用模板字符串或条件运算符：

const isActive = true;  
element.className = `card ${isActive ? "active" : ""}`;

结论

HTML DOM className 属性 是网页开发中不可或缺的工具，它赋予开发者动态控制元素样式的权力。从基础的获取与设置，到进阶的增删切换，再到与框架或状态管理的结合，这一属性的应用场景广泛且灵活。

通过本文的讲解，读者应能掌握以下核心能力：

  • 理解 className 在 DOM 中的角色
  • 熟练使用 classList 方法进行类名操作
  • 设计基于类名交互的网页功能

未来在开发过程中，无论是实现简单的按钮高亮，还是复杂的组件状态管理，HTML DOM className 属性 都将是一个值得信赖的工具。建议读者通过实际项目不断练习，逐步提升对 DOM 操作的掌控力。

最新发布

查看更多文章