javascript如何操作CSS_如何动态添加和移除类？-js教程-PHP中文网

javascript如何操作CSS_如何动态添加和移除类？

夢幻星辰

发布： 2025-12-22 21:52:02

原创

716人浏览过

最推荐的方式是通过 classList API 动态操作 CSS 类：add 添加、remove 移除、toggle 切换、contains 检查，符合关注点分离，便于复用与维护。

javascript如何操作css_如何动态添加和移除类？

JavaScript 操作 CSS 最常用、最推荐的方式就是通过动态添加和移除 CSS 类（class），而不是直接修改 style 属性。这样更符合关注点分离原则，也便于复用样式和维护。

使用 classList API（现代标准方式）

classList 是元素对象上的一个只读属性，返回一个 DOMTokenList，提供简洁、安全的方法来操作类名。

添加类：element.classList.add("active", "highlight") —— 可一次加多个类，已存在不重复
移除类：element.classList.remove("active") —— 不存在的类不会报错
切换类（有则删，无则加）：element.classList.toggle("hidden")
检查是否含有某类：element.classList.contains("disabled") → 返回布尔值
替换类：element.classList.replace("old", "new")（支持较新浏览器）
清空所有类：element.className = "" 或 element.setAttribute("class", "")（classList 本身不提供 clear 方法）

兼容旧浏览器：回退到 className 操作

IE10 以下不支持 classList，可手动处理 className 字符串（但容易出错，仅作了解）：

添加类：el.className += " new-class"（注意空格，可能重复）
移除类：需用正则或 split/join 处理，例如：
el.className = el.className.replace(/\bold-class\b/g, "").trim()

实际项目中建议用 classList + 简单 polyfill，或直接放弃 IE9 及更早版本。

立即学习“Java免费学习笔记（深入）”；

Stable Video

Stability AI 发布的开源AI视频大模型，用文字或图像创建视频，把你的概念变成迷人的电影

227

查看详情

常见实用场景示例

比如做一个按钮点击切换激活态：

const btn = document.querySelector("#toggle-btn");
btn.addEventListener("click", () => {
  btn.classList.toggle("active");
  btn.classList.toggle("pressed");
});

登录后复制

再比如表单验证后高亮错误项：

const input = document.querySelector("input");
if (!input.value) {
  input.classList.add("error", "shake");
} else {
  input.classList.remove("error", "shake");
}

登录后复制