📌  相关文章
📜  如何使用 jQuery 设置指定元素的背景颜色？(1)

📅  最后修改于: 2023-12-03 15:08:22.489000             🧑  作者: Mango

如何使用 jQuery 设置指定元素的背景颜色？

在开发中，经常需要动态的改变页面元素的样式，其中之一就是改变背景颜色。本文将介绍如何使用 jQuery 设置指定元素的背景颜色。

使用 jQuery 的 css() 方法

jQuery 提供了一个适用于所有 CSS 属性的 css() 方法。所以我们可以通过 css() 方法来设置元素的背景颜色。

$(selector).css("background-color", color);

其中，selector 表示要设置背景颜色的元素，color 是指定的颜色值。

在实际开发中，使用 css() 方法来设置背景颜色的场景非常多，比如用户点击按钮后改变某个元素的背景颜色、实现一个交互式的图片墙等等。

示例代码

下面是一个使用 jQuery 设置指定元素的背景颜色的实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Set Background Color</title>
    <style>
        .bg-color {
            width: 100px;
            height: 100px;
            margin: 50px;
            border: 1px solid #ddd;
            display: inline-block;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".bg-color").click(function(){
                $(this).css("background-color", "#f00");
            });
        });
    </script>
</head>
<body>
<div class="bg-color"></div>
<div class="bg-color"></div>
<div class="bg-color"></div>
</body>
</html>

在这个例子中，我们首先定义了一个 .bg-color 的样式，然后创建了三个带有该样式的 div 元素，并将它们添加到了文档中。随后，我们使用 jQuery 的 click() 方法来监听三个元素的点击事件，并在点击事件发生时，将点击的元素的背景颜色设置为 #f00，也就是红色。