jQuery 设置 CSS 属性示例介绍


当然,我可以为你提供一个使用 jQuery 设置 CSS 属性的基本示例。以下是一个简单的 HTML 和 jQuery 代码片段,展示了如何改变一个元素的 CSS 属性。

### HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 设置 CSS 属性示例</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        /* 初始样式 */
        #myDiv {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 20px;
        }
    </style>
</head>
<body>

<div id="myDiv"></div>

<script>
    // jQuery 脚本
    $(document).ready(function(){
        // 使用 jQuery 更改 div 的背景色和宽度
        $("#myDiv").css("background-color", "red").css("width", "200px");

        // 或者更简洁的方式,链式调用
        $("#myDiv").css({
            "background-color": "green",
            "width": "300px",
            "height": "150px" // 也可以同时设置多个属性
        });
    });
</script>

</body>
</html>

### 解释

1. **HTML 结构**:包含一个 `div` 元素,其 `id` 为 `myDiv`,并有一些初始的 CSS 样式。

2. **jQuery 引入**:通过 Google CDN 引入了 jQuery 库。

3. **jQuery 脚本**:

- 当文档加载完成后(`$(document).ready(function(){...})`),使用 jQuery 选择器 `$("#myDiv")` 选中 `div` 元素。

- 使用 `.css()` 方法设置 CSS 属性。可以单独设置每个属性(如示例中的第一次调用),也可以一次性设置多个属性(如示例中的第二次调用)。

- `.css()` 方法可以接受两个参数(属性名和属性值),也可以接受一个对象(属性名和属性值的键值对)。

这个例子展示了如何使用 jQuery 来动态地改变网页上元素的 CSS 属性。