Jquery 简明教程
jQuery - CSS Properties
jQuery 提供了 css() 方法来操作匹配元素的 CSS 属性。
jQuery provides css() method to manipulate CSS properties of the matched elements.
jQuery css() 方法不修改 jQuery 对象的内容，但它们用于获取和设置 DOM 元素上的 CSS 属性。
JQuery css() method does not modify the content of the jQuery object but they are used to get and set CSS properties on DOM elements.
jQuery - Get CSS Properties
jQuery css() 方法可用于获取与第一个匹配的 HTML 元素关联的 CSS 属性的值。以下是 css() 方法的语法：
jQuery css() method can be used to get the value of a CSS property associated with the first matched HTML element. Following is the syntax of the css() method:
$(selector).css(propertyName);jQuery 理解 css( "background-color" ) 和 css( "backgroundColor" ) 并返回正确的值。
jQuery understands and returns the correct value for both css( "background-color" ) and css( "backgroundColor" ).
Example
让我们尝试以下示例并验证结果。这应该返回第一个匹配 <div> 的背景色。
Let’s try the following example and verify the result. This should return the background color of the first matched <div>.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
alert("Background color = " + $("div").css("background-color"));
});
});
</script>
<style>
button{margin:10px;width:150px;cursor:pointer}
div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
<p>Click the below button to see the result:</p>
<div style="background-color:#9c9cff;">Blue</div>
<div style="background-color:#93ff93;">Green</div>
<button>Get CSS Property</button>
</body>
</html>jQuery - Set CSS Properties
jQuery css() 方法可用于设置与匹配的 HTML 元素关联的一个或多个 CSS 属性的值。以下是 css() 方法的语法：
jQuery css() method can be used to set the value of one or more CSS properties associated with the matched HTML element. Following is the syntax of the css() method:
$(selector).css(propertyName, value);这两种参数都是必需的参数， propertyName 表示 CSS 属性名称， value 表示属性的有效值。
Here both the parameters are required, propertyName represents a CSS property name where as value represents a valid value of the property.
Example
让我们尝试以下示例并验证结果。这里，我们将获取第一个匹配的 <div> 的颜色，并将使用 div 背景色更改所有 <p> 的文本颜色。
Let’s try the following example and verify the result. Here we will take the color of the first matched <div> and will change the text color of all <p> using the div background-color.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
var color = $("div").css("background-color");
$("p").css("color", color);
});
});
</script>
<style>
button{margin:10px;width:150px;cursor:pointer}
div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
<p>Click the below button to see the result:</p>
<div style="background-color:#9c9cff;">Blue</div>
<div style="background-color:#93ff93;">Green</div>
<button>Set CSS Property</button>
</body>
</html>jQuery - Set Multiple CSS Properties
您可以使用单个 jQuery 方法 css() 对匹配的元素应用多个 CSS 属性。您可以在单个调用中应用任意多个属性。
You can apply multiple CSS properties on the matched elements using a single jQuery method css(). You can apply as many properties as you like in a single call.
以下是 css() 方法设置多个 CSS 属性的语法：
Following is the syntax of the css() method to set multiple CSS properties:
$(selector).css({propertyName1:value1, propertyName2:value2,...});Example
让我们尝试以下示例并验证结果。这里，我们将为所有 <div> 设置背景色 "#fb7c7c;"，将字体大小设置为 25px。
Let’s try the following example and verify the result. Here we will set background color of all the <div> to "#fb7c7c;" and font-size to 25px.
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div").css({"background-color":"#fb7c7c", "font-size": "25px"});
});
});
</script>
<style>
button{margin:10px;width:150px;cursor:pointer}
div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
<p>Click the below button to see the result:</p>
<div style="background-color:#9c9cff;">Blue</div>
<div style="background-color:#93ff93;">Green</div>
<button>Set CSS Property</button>
</body>
</html>jQuery HTML/CSS Reference
您可以在以下页面获取用来操作 CSS 和 HTML 内容的所有 jQuery 方法的完整参考： jQuery HTML/CSS Reference 。
You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery HTML/CSS Reference.