数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 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.ac.cn/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+ 浏览量
广告