資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
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。這裡你可以將鍵作為屬性，將值作為該屬性的值。
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+ 次瀏覽
廣告