jQuery css() 方法动态修改CSS属性

jQuery提供了css()方法，它可以动态改变HTML元素的CSS属性。该方法接受一个CSS属性名和值对作为参数，可以在元素上设置、获取、或者改变CSS属性。

语法

下面是css()方法的语法：

$(selector).css(propertyname)
$(selector).css(propertyname, value)
$(selector).css({propertyname:value, propertyname:value, ...})

其中：
- $(selector) 为jQuery选择器，指的是要操作的HTML元素
- propertyname 是CSS属性名称，可以使用驼峰式或者带引号的短横线式书写
- value 是CSS属性的值，可以是数值、字符串、函数等
- {propertyname:value, propertyname:value, ...} 是一个CSS属性名和值对的JSON对象，可以一次性设置多个属性

示例1：改变HTML元素的背景色

下面这个示例中，我们选中了一个div元素，并通过css()方法为它设置了背景色。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery css()方法示例</title>
    <style>
        #demo {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $("#demo").css("background-color", "red");
        });
    </script>
</body>
</html>

在上述示例中，我们在$(function(){})的回调函数中调用了css()方法，将div的背景色改为了红色。

示例2：改变多个CSS属性

下面这个示例中，我们选中了一个p元素，并通过css()方法为它同时设置了多个CSS属性。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery css()方法示例</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin: 0 auto;
            text-align: center;
            line-height: 100px;
            color: #fff;
        }
    </style>
</head>
<body>
    <p class="demo">Hello, world!</p>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $(".demo").css({
                "background-color": "red",
                "font-size": "24px",
                "color": "#fff"
            });
        });
    </script>
</body>
</html>

在上述示例中，我们在$(function(){})的回调函数中调用了css()方法，将p元素的背景色改为了红色，同时将字号和文本颜色改为了白色。注意到我们使用了JSON对象一次性为元素设置了多个CSS属性，而不是使用多次css()方法来完成改变。这样做可以提高代码的可读性和执行效率。

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

jQuery css() 方法动态修改CSS属性

语法

示例1：改变HTML元素的背景色

示例2：改变多个CSS属性

相关文章