Jquery常用css函数

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="width: 100px; height: 100px; background: #ff0000">
     </div>
     <p id="result">
         Click in the box</p>
 </body>
 </html>

 

posted @ 2012-05-11 10:30  zhangchun  阅读(1089)  评论(0)  编辑  收藏  举报