主页/jQuery教程/DOM操作与遍历/jQueryCSS与样式操作

jQuery教程

jQueryCSS与样式操作

5,108字
22–32 分钟

jQuery CSS与样式操作是jQuery开发中的核心内容，jQuery提供了css()、addClass()、removeClass()、toggleClass()、hasClass()五种核心方法，便捷实现HTML元素的样式控制，jQuery样式操作方法简洁高效，大幅简化原生JavaScript操作CSS的繁琐流程，是前端开发中实现页面样式动态调整的关键手段。

目录

css()方法

css()方法是jQuery样式操作中最基础的方法，可实现元素CSS样式属性的获取与设置，支持单个样式的单独操作与多个样式的批量操作，兼容所有主流浏览器，是jQuery CSS操作中使用频率最高的方法之一。

语法

// 获取指定CSS属性值
$(selector).css(propertyName);

// 设置单个CSS属性
$(selector).css(propertyName, value);

// 批量设置CSS属性
$(selector).css({propertyName1: value1, propertyName2: value2, ...});

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery css()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { width: 200px; height: 200px; margin: 20px 0; }
    </style>
</head>
<body>
    <div class="box" style="background-color: #eee;"></div>

    <script>
        // 获取CSS属性值
        var bgColor = $(".box").css("background-color");
        console.log("当前背景色：" + bgColor); // 输出：当前背景色：rgb(238, 238, 238)

        // 设置单个CSS属性
        $(".box").css("background-color", "#f00");

        // 批量设置CSS属性
        $(".box").css({
            "border": "2px solid #000",
            "border-radius": "8px",
            "box-shadow": "0 0 10px rgba(0,0,0,0.3)"
        });
    </script>
</body>
</html>

addClass()方法

addClass()方法是jQuery样式操作中用于添加CSS类的核心方法，用于为匹配的元素添加一个或多个预设CSS类，添加的类不会覆盖元素已有的类，仅进行追加操作，是批量应用预设样式、实现样式复用的常用手段，也是jQuery样式操作的重要组成部分。

语法

// 添加单个CSS类
$(selector).addClass(className);

// 添加多个CSS类（类名之间用空格分隔）
$(selector).addClass(className1 className2 ...);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery addClass()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { width: 200px; height: 200px; margin: 20px 0; }
        .bg-red { background-color: #f00; }
        .border-black { border: 2px solid #000; }
        .rounded { border-radius: 8px; }
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
        // 添加单个CSS类
        $(".box").addClass("bg-red");

        // 添加多个CSS类
        $(".box").addClass("border-black rounded");
    </script>
</body>
</html>

removeClass()方法

removeClass()方法与addClass()方法相辅相成，是jQuery样式操作中用于移除CSS类的核心方法，可移除匹配元素上的一个或多个CSS类，若不指定具体类名，则会移除元素上所有已有的CSS类，常与addClass()配合实现样式的动态切换，完善jQuery CSS操作的闭环。

语法

// 移除单个CSS类
$(selector).removeClass(className);

// 移除多个CSS类（类名之间用空格分隔）
$(selector).removeClass(className1 className2 ...);

// 移除所有CSS类
$(selector).removeClass();

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery removeClass()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { width: 200px; height: 200px; margin: 20px 0; }
        .bg-red { background-color: #f00; }
        .border-black { border: 2px solid #000; }
        .rounded { border-radius: 8px; }
    </style>
</head>
<body>
    <div class="box bg-red border-black rounded"></div>

    <script>
        // 移除单个CSS类
        $(".box").removeClass("bg-red");

        // 移除多个CSS类
        $(".box").removeClass("border-black rounded");

        // 移除所有CSS类（注释后可查看效果）
        // $(".box").removeClass();
    </script>
</body>
</html>

toggleClass()方法

toggleClass()方法是jQuery样式操作中实现样式切换的便捷方法，核心功能是切换元素的CSS类，即元素已拥有该类则移除，未拥有则添加，同时支持传入第二个布尔参数，强制实现类的添加或移除，简化了addClass()与removeClass()的切换逻辑，提升jQuery样式操作的效率。

语法

// 切换单个CSS类
$(selector).toggleClass(className);

// 切换多个CSS类（类名之间用空格分隔）
$(selector).toggleClass(className1 className2 ...);

// 强制添加/移除类（true强制添加，false强制移除）
$(selector).toggleClass(className, switch);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery toggleClass()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { width: 200px; height: 200px; margin: 20px 0; cursor: pointer; }
        .bg-red { background-color: #f00; }
        .border-black { border: 2px solid #000; }
    </style>
</head>
<body>
    <div class="box">点击切换样式</div>

    <script>
        // 点击切换单个类
        $(".box").click(function() {
            $(this).toggleClass("bg-red");
        });

        // 强制添加类（3秒后执行）
        setTimeout(function() {
            $(".box").toggleClass("border-black", true);
        }, 3000);

        // 强制移除类（6秒后执行）
        setTimeout(function() {
            $(".box").toggleClass("border-black", false);
        }, 6000);
    </script>
</body>
</html>

hasClass()方法

hasClass()方法是jQuery样式操作中用于状态判断的核心方法，用于判断匹配的元素是否拥有指定的CSS类，返回值为布尔值（true表示拥有，false表示没有），常作为样式切换、条件执行的判断依据，是完善jQuery CSS操作逻辑的重要方法。

语法

$(selector).hasClass(className);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery hasClass()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { width: 200px; height: 200px; margin: 20px 0; }
        .bg-red { background-color: #f00; }
    </style>
</head>
<body>
    <div class="box bg-red"></div>

    <script>
        // 判断是否拥有指定类
        var hasBgRed = $(".box").hasClass("bg-red");
        var hasBorder = $(".box").hasClass("border-black");

        console.log("是否有bg-red类：" + hasBgRed); // 输出：是否有bg-red类：true
        console.log("是否有border-black类：" + hasBorder); // 输出：是否有border-black类：false

        // 结合条件判断使用
        if (hasBgRed) {
            $(".box").addClass("border-black");
        }
    </script>
</body>
</html>

jQuery版本中CSS与样式操作方法的变化

以下表格汇总了css()、addClass()、removeClass()、toggleClass()、hasClass()五种jQuery样式操作方法在不同jQuery版本中的核心变化，便于开发者根据项目所使用的jQuery版本调整代码，确保jQuery CSS操作的兼容性。

方法名称版本变化说明
css()jQuery 1.0 版本引入，支持基础的样式获取与设置；jQuery 1.4 版本新增支持批量设置样式（传入对象参数）；jQuery 1.9 版本修复了获取复合样式（如font、background）时的兼容性问题，优化了jQuery CSS操作的稳定性。
addClass()jQuery 1.0 版本引入，支持添加单个类；jQuery 1.2 版本新增支持添加多个类（类名用空格分隔）；jQuery 1.4 版本优化了类名去重逻辑，避免重复添加同一类，提升jQuery样式操作的规范性。
removeClass()jQuery 1.0 版本引入，支持移除单个类；jQuery 1.2 版本新增支持移除多个类；jQuery 1.4 版本新增不传入类名时移除所有类的功能，完善了jQuery样式操作的完整性。
toggleClass()jQuery 1.0 版本引入，支持单个类的切换；jQuery 1.2 版本新增支持多个类的切换；jQuery 1.3 版本新增第二个布尔参数，用于强制添加或移除类，增强了jQuery样式操作的灵活性。
hasClass()jQuery 1.2 版本引入，替代了早期的is(“.className”)写法；jQuery 1.4 版本优化了判断效率，支持在多个匹配元素中判断是否有任意一个元素拥有指定类，提升jQuery CSS操作的性能。

css()、addClass()、removeClass()、toggleClass()、hasClass()五种方法共同构成了jQuery样式操作的核心体系，涵盖了样式的获取、设置、添加、移除、切换与判断，熟练掌握这些jQuery CSS操作方法，能有效提升前端页面样式开发的效率与规范性。

最新发布