jQuery 拥有三种用于 CSS 操作的重要函数：
$(selector).css(name,value)
$(selector).css({properties})
$(selector).css(name)
1、css() 改变html元素的css属性,将所有匹配元素的单个样式属性设置为一个值，如果提供一个数字，则该数字将自动转换为像素值。
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>改变css元素的属性</title> 5 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $("button").click(function () { 9 $("p").css("background-color","red"); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <h2> 16 This is a heading</h2> 17 <p> 18 This is a paragraph.</p> 19 <p> 20 This is another paragraph.</p> 21 <button type="button"> 22 Click me</button> 23 </body> 24 </html>
改变多个css属性
View Code
$(document).ready(function () {
$("button").click(function () {
$("p").css({ "background-color": "red", "font-size": "200%" });
});
});
2、获得css的属性
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>获得元素的css的属性</title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("div").click(function () { $("#result").html($(this).css("background-color")); }); }); </script> </head> <body> <div style=" 100px; height: 100px; background: #ff0000"> </div> <p id="result"> Click in the box</p> </body> </html>