Web開發——JavaScript庫（jQuery HTML——獲取並設定CSS類 續，需要整合在一起）
阿新 • • 發佈：2018-11-12
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>