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
1 $(document).ready(function () {

2             $("button").click(function () {

3                 $("p").css({ "background-color": "red", "font-size": "200%" });

4             });

5         });

2、获得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             $("div").click(function () {

 9                 $("#result").html($(this).css("background-color"));

10             });

11         });

12     </script>

13 </head>

14 <body>

15     <div style="width: 100px; height: 100px; background: #ff0000">

16     </div>

17     <p id="result">

18         Click in the box</p>

19 </body>

20 </html>

 

你可能感兴趣的:(jquery)