jQuery Get 和 Set CSS 属性
在本教程中，您将学习如何使用 jQuery 获取或设置样式属性。
jQuery css() 方法
jQuery css() 方法用于获取 CSS 属性的 计算值 或为选定元素设置一个或多个 CSS 属性。
此方法提供了一种将样式直接应用于尚未或无法在样式表中轻松定义的 HTML 元素（即 内联样式）的快速方法。
获取一个 CSS 属性值
您可以通过简单地将属性名称作为参数传递给 css() 方法来获取元素的 CSS 属性的计算值。 这是基本语法：
$(selector).css("propertyName");
以下示例将在单击 <div> 元素时检索并显示 <div> 元素的 CSS background-color 属性的计算值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style>
div{
width: 100px;
height: 100px;
display: inline-block;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").click(function(){
var color = $(this).css("background-color");
$("#result").html(color);
});
});
</script>
</head>
<body>
<div style="background-color:orange;"></div>
<div style="background-color:#ee82ee;"></div>
<div style="background-color:rgb(139,205,50);"></div>
<div style="background-color:#f00;"></div>
<p>The computed background-color property value of the clicked DIV element is: <b id="result"></b></p>
</body>
</html>设置单个 CSS 属性和值
css() 方法可以将属性名称和值作为单独的参数来设置元素的单个 CSS 属性。 基本语法可以通过以下方式给出：
$(selector).css("propertyName", "value");
以下示例将在单击时将 <div> 元素的 CSS background-color 属性设置为 颜色值 blue。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style>
.box{
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid #cdcdcd;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".box").click(function(){
$(this).css("background-color", "blue");
});
});
</script>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>设置多个 CSS 属性和值
您还可以使用 css() 方法设置多个 CSS 属性。 可以通过以下方式给出为元素设置多个属性的基本语法：
$(selector).css({"propertyName":"value", "propertyName":"value", ...});
下面的示例将同时为选定元素设置 background-color 以及 padding CSS 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style>
p{
font-size: 18px;
font-family: Arial, sans-serif;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "yellow", "padding": "20px"});
});
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p style="background-color:orange;">This a paragraph.</p>
<p style="background-color:#ee82ee;">This is another paragraph.</p>
<p style="background-color:rgb(139,205,50);">This is none more paragraph.</p>
<p>This is one last paragraph.</p>
<button type="button">Add CSS Styles</button>
</body>
</html>Advertisements