jQuery css()方法

jQuery中的css()方法可以用于设置元素的CSS属性。这个方法有许多用途，可以同时用于获取和设置CSS属性值。以下是详细的攻略。

语法

css()方法具有以下语法：

$(selector).css(property, value)

selector 表示要选择的元素。
property 是一个CSS属性的名称
value 是属性的值

例如：

$("p").css("color", "blue");

这个例子会将文档中所有的 <p> 元素的 color 属性设置为 blue。

获取CSS属性值

除了用 css() 方法来设置样式属性，我们也可以用它来获取指定元素的CSS属性值。这可以通过将 css() 方法调用时省略value参数来实现。例如：

var color = $("p").css("color");

这个例子会获得第一个 <p> 元素的 color 属性的值，并将其存储在变量 color 中。

设置多个CSS属性

css() 方法也可以同时设置多个CSS属性。我们可以传递一个关联数组作为参数给该方法。例如：

$("p").css({
  "color": "blue",
  "background-color": "yellow"
});

这个例子中，所有 p 元素的 color 属性都被设置为 blue， background-color 属性都被设置为 yellow。

示例说明

下面的示例演示如何使用 css() 方法添加和删除类 error：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery CSS 方法示例</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <style>
        .error {
            color: red;
            background-color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一个段落</p>
        <p>这是另一个段落</p>
        <p>这是第三个段落</p>
        <button id="add">添加错误类</button>
        <button id="remove">删除错误类</button>
    </div>
    <script>
        $(document).ready(function(){
            $("#add").click(function(){
                $("p").css("color", "red");
                $("p").addClass("error");
            });

            $("#remove").click(function(){
                $("p").css("color", "");
                $("p").removeClass("error");
            });
        });
    </script>
</body>
</html>

在这个示例中，我们先定义了一个CSS类 .error，它给文本赋予了红色、黄色背景色，并设置了20像素的字体大小。在HTML文件中，我们有3个段落和两个按钮。单击“添加错误类”按钮将段落的颜色设置为红色，并将.error类添加到所有段落中。而当单击“删除错误类”时，我们把段落的颜色设为空，并删除所有段落的.error类。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery css()方法 - Python技术站

语法

获取CSS属性值

设置多个CSS属性

示例说明

相关文章