操作 CSS

jQuery 提供了一系列的方法来操作 CSS：

addClass()： 向所选元素添加一个或多个类（多个类名之间使用空格隔开）；
removeClass()： 从所选元素删除一个或多个类（多个类名之间使用空格隔开）；
toggleClass()： 对所选元素进行添加/删除类的切换操作；
hasClass()： 检查被所选元素是否包含指定的 class 名称，返回值为 Boolean 型。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置或返回CSS类</title>
    <script src="js/jquery-1.8.3.js"></script>
    <style>
        .red {
            color: red;
        }

        .green{
            color: green;
        }

        .blue {
            color: blue;
        }
    </style>
</head>
<body>
<h1 id="h1">标题1</h1>
<button id="btn1">addClass()</button>
<h1 id="h2" class="green">标题2</h1>
<button id="btn2">removeClass()</button>
<h1 id="h3" class="blue">标题3</h1>
<button id="btn3">toggleClass()</button>
<h1 id="h4">标题4</h1>
<button id="btn4">hasClass()</button>
<script>
    $(function () {
        // addClass()：向所选元素添加一个或多个类（多个类名之间使用空格隔开）。
        $("#btn1").click(function () {
            $("#h1").addClass("red");
        });

        // removeClass()：从所选元素删除一个或多个类（多个类名之间使用空格隔开）。
        $("#btn2").click(function () {
            $("#h2").removeClass("green");
        });

        // toggleClass()：对所选元素进行添加/删除类的切换操作。
        $("#btn3").click(function () {
            $("#h3").toggleClass("blue");
        });

        // hasClass()：检查被所选元素是否包含指定的 class 名称，返回值为 Boolean 型。
        $("#btn4").click(function () {
            alert($("#h4").hasClass("hh"));
        });
    });
</script>
</body>
</html>

效果演示：

操作 CSS.gif

设置或获取 CSS 属性

jQuery 中提供了 <code>css()</code> 这个方法来设置或获取元素的 CSS 属性：

获取 CSS 属性： css("propertyName")；
设置单个 CSS 属性： css("propertyName","propertyValue")；
设置多个 CSS 属性： css({"propertyName1":"propertyValue1","propertyName2":"propertyValue2",...})。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置或获取CSS属性</title>
    <script src="js/jquery-1.8.3.js"></script>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: coral;
        }

        #p1 {
            color: darkorchid;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<button id="btn1">获取 div 的背景颜色</button>
<p id="p1">这是一个段落。</p>
<button id="btn2">设置 p 的字体颜色</button>
<p id="p2">这是一个段落。</p>
<button id="btn3">设置 p 的字体颜色及边框</button>
<script>
    $(function () {
        $("#btn1").click(function () {
            alert("div 背景颜色为：" + $("#div1").css("backgroundColor"));
        });

        $("#btn2").click(function () {
            $("#p1").css("color", "red");
        });

        $("#btn3").click(function () {
            $("#p2").css({
                "color": "blue",
                "border": "1px solid red"
            });
        });
    });
</script>
</body>
</html>

效果演示：

设置或获取 CSS 属性.gif

jQuery - HTML DOM 操作（二）

操作 CSS

设置或获取 CSS 属性