1.4 jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
（1）返回CSS属性
如需返回指定的 CSS 属性的值，请使用如下语法：
1 css("propertyname");
举例（下面的例子将返回首个匹配元素的 background-color 值）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery库，src可以直接指向本地下载的jQery库--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 14 $(document).ready(function(){ 15 $("button").click(function(){ 16 alert("Background color = " + $("p").css("background-color")); 17 }); 18 }); 19 20 </script> 21 22 </head> 23 24 <body> 25 26 <h2>这是标题</h2> 27 <p style="background-color:#ff0000">这是一个段落。</p> 28 <p style="background-color:#00ff00">这是一个段落。</p> 29 <p style="background-color:#0000ff">这是一个段落。</p> 30 <button>返回 p 元素的背景色</button> 31 32 </body> 33 </html>
（2）设置CSS属性
如需设置指定的 CSS 属性的值，请使用如下语法：
1 css("propertyname","value");
举例（下面的例子将为所有匹配元素设置 background-color 值：）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery库，src可以直接指向本地下载的jQery库--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 14 $(document).ready(function(){ 15 $("button").click(function(){ 16 $("p").css("background-color","yellow"); 17 }); 18 }); 19 20 </script> 21 22 </head> 23 24 <body> 25 26 <h2>这是标题</h2> 27 <p style="background-color:#ff0000">这是一个段落。</p> 28 <p style="background-color:#00ff00">这是一个段落。</p> 29 <p style="background-color:#0000ff">这是一个段落。</p> 30 <p>这是一个段落。</p> 31 <button>返回 p 元素的背景色</button> 32 33 </body> 34 </html>
（3）设置多个CSS属性
如需设置多个 CSS 属性，请使用如下语法：
1 css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <!--引用jQuery库，src可以直接指向本地下载的jQery库--> 10 <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 14 $(document).ready(function(){ 15 $("button").click(function(){ 16 $("p").css({"background-color":"yellow","font-size":"200%"}); 17 }); 18 }); 19 20 </script> 21 22 </head> 23 24 <body> 25 26 <h2>这是标题</h2> 27 <p style="background-color:#ff0000">这是一个段落。</p> 28 <p style="background-color:#00ff00">这是一个段落。</p> 29 <p style="background-color:#0000ff">这是一个段落。</p> 30 <p>这是一个段落。</p> 31 <button>返回 p 元素的背景色</button> 32 33 </body> 34 </html>