jQuery css() 方法学习笔记
简介
jQuery css() 方法用于获取或设置HTML元素的CSS属性值。它提供了一种简单而有效的方法，可以轻松地在JavaScript中操作CSS。
语法
javascriptCopy Code// Get style properties
$(selector).css(property)
// Set one style property
$(selector).css(property, value)
// Set multiple style properties
$(selector).css({property1:value1, property2:value2, ...})
实例
获取CSS属性
以下示例演示如何使用css()方法获取元素的CSS属性值：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>jQuery css() 方法实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="example" style="background-color:yellow;width:200px;height:100px;">Hello World!</div>
<script>
var backgroundColor = $("#example").css("background-color");
var width = $("#example").css("width");
var height = $("#example").css("height");
alert("Background color:" + backgroundColor + ", Width:" + width + ", Height:" + height);
</script>
</body>
</html>
输出为：
Copy CodeBackground color:rgb(255, 255, 0), Width:200px, Height:100px
设置CSS属性
以下示例演示如何使用css()方法设置元素的CSS属性值：
单个属性
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>jQuery css() 方法实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="example" style="background-color:yellow;width:200px;height:100px;">Hello World!</div>
<script>
$("#example").css("background-color", "red");
$("#example").css("width", "300px");
$("#example").css("height", "200px");
</script>
</body>
</html>
多个属性
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>jQuery css() 方法实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="example" style="background-color:yellow;width:200px;height:100px;">Hello World!</div>
<script>
$("#example").css({"background-color": "red", "width": "300px", "height": "200px"});
</script>
</body>
</html>
以上示例将元素的背景颜色更改为红色，宽度更改为300像素，高度更改为200像素。