JQuery:CSS()方法
jQuery css()方法：css()方法設置或返回被選元素的一個或多個樣式屬性。
1、返回 CSS 屬性
如需返回指定的 CSS 屬性的值，請使用如下語法：
css("propertyname");
下面的例子將返回首個匹配元素的 background-color 值：
實例：$("p").css("background-color");
代碼如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>JQuery的使用！！！</title> <script src="jquery-3.1.0.js"></script> <script> $(document).ready(function(){ //返回p元素的background-color $("button").click(function(){ alert("p元素的背景色是："+ $("p").css("background-color")); }); }); </script> </head> <body> <h2>這是一個標題</h2> <p style="background-color:#ff0000">這是一個段落。</p> <p style="background-color:#00ff00">這是一個段落。</p> <p style="background-color:#0000ff">這是一個段落。</p> <button>返回p元素的background-color</button> </body> </html>
2、設置 CSS 屬性
如需設置指定的 CSS 屬性，請使用如下語法：
css("propertyname","value");
下面的例子將為所有匹配元素設置 background-color 值：
實例：$("h2").css("background-color","yellow");
代碼如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>JQuery的使用！！！</title> <script src="jquery-3.1.0.js"></script> <script> $(document).ready(function(){ //設置h2元素的background-color $("button").click(function(){ $("h2").css("background-color","yellow"); }); }); </script> </head> <body> <h2>這是一個標題</h2> <p style="background-color:#ff0000">這是一個段落。</p> <p style="background-color:#00ff00">這是一個段落。</p> <p style="background-color:#0000ff">這是一個段落。</p> <button>設置h2元素的background-color</button> </body> </html>
3、設置多個 CSS 屬性
如需設置多個 CSS 屬性，請使用如下語法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子將為所有匹配元素設置 background-color 和 font-size：
實例：$("h2").css({"background-color":"yellow","font-size":"200%"});
代碼如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>JQuery的使用！！！</title> <script src="jquery-3.1.0.js"></script> <script> $(document).ready(function(){ //設置h2元素的多個css屬性 $("button").click(function(){ $("h2").css({"background-color":"yellow","font-size":"50%"}); }); }); </script> </head> <body> <h2>這是一個標題</h2> <p style="background-color:#ff0000">這是一個段落。</p> <p style="background-color:#00ff00">這是一個段落。</p> <p style="background-color:#0000ff">這是一個段落。</p> <button>設置h2元素的多個css屬性</button> </body> </html>
