使用JavaScript动态管理CSS类：条件判断与切换实践

本文详细介绍了如何利用javascript的`classlist` api，特别是`contains()`、`remove()`和`add()`方法，实现html元素css类的动态条件判断与切换。通过具体的代码示例，读者将学习如何检查元素是否包含特定类，并根据判断结果在两个或多个类之间进行切换，从而实现页面元素的交互式样式管理。

1. 理解 classList API

在现代JavaScript中，管理HTML元素的CSS类列表最推荐的方式是使用元素的 classList 属性。classList 是一个只读的 DOMTokenList 接口，它提供了一系列便捷的方法来添加、移除、检查和切换元素的类名，而无需直接操作 className 字符串。

常用的 classList 方法包括：

• element.classList.contains(className): 用于检查元素是否包含指定的类名。如果包含，则返回 true；否则返回 false。这是进行条件判断的关键。
• element.classList.add(className1, className2, ...): 用于向元素添加一个或多个类名。如果类名已存在，则不会重复添加。
• element.classList.remove(className1, className2, ...): 用于从元素中移除一个或多个类名。如果类名不存在，则不会报错。
• element.classList.toggle(className, [force]): 用于切换类名。如果类名存在，则移除它；如果不存在，则添加它。可选的 force 参数是一个布尔值，true 强制添加，false 强制移除。

2. 场景示例：切换输入框样式

假设我们有一个输入框容器，它可能处于两种状态：默认状态（例如，隐藏或不活跃）和活跃状态（例如，显示或聚焦）。我们需要通过JavaScript来检测当前状态，并将其切换到另一种状态。

具体需求如下：

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

1. 检查一个HTML元素当前是否具有 text-area-box 类。
2. 如果元素具有 text-area-box 类，则将其移除并添加 text-area-box-active 类。
3. 如果元素不具有 text-area-box 类（假设此时具有 text-area-box-active 类），则将其移除 text-area-box-active 类并添加 text-area-box 类。

3. HTML 结构与 CSS 样式

首先，我们定义HTML结构和对应的CSS样式，以便观察类切换后的视觉效果。

HTML 结构:

<p class="text-area-box" id="text-area-box">
    <input type="text" name="" required="">
    <label>Titre</label>
</p>

登录后复制

CSS 样式:

标签： css javascript java html 前端 浏览器 ssl 前端开发 ai css样式 点击事件 html元