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

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

语法

我们可以通过以下方式使用CSS。这里你可以将键作为属性，将值作为该属性的值。

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+ 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告