当前位置：首页 > jquery

jquery修改class

2026-04-08 16:03:41jquery

jQuery 修改 class 的方法

jQuery 提供了多种方法来修改元素的 class 属性，以下是一些常用的方式：

添加 class
使用 addClass() 方法可以向元素添加一个或多个 class。

$("#element").addClass("new-class");

移除 class
使用 removeClass() 方法可以移除元素的一个或多个 class。

jquery修改class

$("#element").removeClass("old-class");

切换 class
使用 toggleClass() 方法可以切换 class 的存在状态。如果 class 存在则移除，不存在则添加。

$("#element").toggleClass("active");

替换 class
通过结合 removeClass() 和 addClass() 可以替换 class。

jquery修改class

$("#element").removeClass("old-class").addClass("new-class");

检查 class 是否存在
使用 hasClass() 方法可以检查元素是否包含某个 class。

if ($("#element").hasClass("target-class")) {
    // 执行操作
}

直接修改 class 属性
使用 attr() 方法可以直接修改 class 属性。

$("#element").attr("class", "new-class");

示例代码

以下是一个完整的示例，展示如何动态修改 class：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight { background-color: yellow; }
        .bold { font-weight: bold; }
    </style>
</head>
<body>
    <div id="example">这是一个示例文本。</div>
    <button id="btnAdd">添加高亮</button>
    <button id="btnRemove">移除高亮</button>
    <button id="btnToggle">切换加粗</button>

    <script>
        $("#btnAdd").click(function() {
            $("#example").addClass("highlight");
        });
        $("#btnRemove").click(function() {
            $("#example").removeClass("highlight");
        });
        $("#btnToggle").click(function() {
            $("#example").toggleClass("bold");
        });
    </script>
</body>
</html>

注意事项

多个 class 可以通过空格分隔同时操作，例如：
```
$("#element").addClass("class1 class2");
```
避免直接使用 attr() 覆盖 class，除非需要完全替换原有 class。
toggleClass() 支持第二个参数（布尔值），强制添加或移除 class：
```
$("#element").toggleClass("active", true); // 强制添加
```