如何使用 jQuery 应用多个 CSS 属性？

使用 **jQuery CSS( {key1:val1, key2:val2....})** 方法应用多个 CSS 属性。我们可以在一次调用中应用任意多个属性。

语法

我们可以以下述方式使用 CSS。在这里，您可以将键作为属性，将 val 作为该属性的值。

selector.css( {key1:val1, key2:val2....keyN:valN})

在 jQuery 中定义多个 CSS 属性

正如我们之前提到的，我们将使用 jQuery css() 方法在任何元素上应用多个 CSS 属性。

  • 首先，我们将使用 **'$(selector)'** 选择我们要应用 CSS 属性的元素。
  • 然后，我们将以 **'key: value';** 格式逐个添加 CSS 属性。我们可以将 CSS 属性用作 **对象字面量** 或 **单个参数**，根据需要选择。

在 jQuery 中定义 CSS 属性的方法

有两种方法可以通过 jQuery 包含 CSS。

  • **对象字面量：** 通过这种方式，我们可以将多个 CSS 属性和值作为对象字面量传递。
    • $('#tutorialsPoint').css({ 
            'color' : 'green', 
            'background-color' : 'gray', 
            'font-size' : '16px' 
});
  • **单个参数：** 在这里，我们可以将属性和值对作为单独的参数。
    • $('#tutorialsPoint')
  .css('color', 'green')
  .css('background-color', 'gray')
  .css('font-size', '16px');

两种方法都很有用，我们个人建议您使用对象字面量的方法。

示例

在以下示例中，我们以上述两种不同的方式在两个元素上应用了多个 CSS。

<!DOCTYPE html>
<html>

<head>
    <title>Define Multiple CSS Attributes in jQuery</title>
    <!-- jQuery CDN Link -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
</head>

<body>
    <div>
        <div id="child1">
            Define Multiple CSS Attributes in jQuery
        </div>
        <div id="child2">
            <p>
                As we have used both the ways to apply
                CSS through jQuery. Multiple CSS are define
                in a single call.
            </p>
        </div>
    </div>
    <script>
        // Object Literal Way
        $('#child1').css({
            'margin' : '5px',
            'font-size': '24px',
            'font-weight': 'bold'
        });

        // Individual Arguments Way
        $('#child2')
            .css('padding', '10px')
            .css('background-color', 'lightgray')
            .css('font-size', '16px');
    </script>
</body>

</html>

更新于： 2024年7月1日

16K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告