資料結構
網路
關係型資料庫管理系統
作業系統
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.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+ 瀏覽量
廣告