JQuery--jQquery控制CSS样式 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .main{
 8             width: 100px;
 9             height: 100px;
10             background-color: pink;
11         }
12     </style>
13     <script src="lib/jquery-1.12.2.js"></script>
14     <script>
15         $(function () {
16             /**
17              *  [JQ的CSS函数]
18              *  单属性修改(可以忽略)
19              *      .css(属性,值)
20              *  多属性修改（推荐）
21              *      .css({
22              *         属性:值
23              *      });
24              *      更是推荐
25              *      .css({
26              *         "属性":"值(单位)",  -- 代码通俗易懂
27              *      });
28              *  单属性获取
29              *   .css(属性)
30              * */
31              $('button:eq(0)').click(function () {
32                   $('.main').css({
33                       "width":"200px"
34                   });
35              });
36 
37             $('button:eq(1)').click(function () {
38                 $('.main').css({
39                     "height":"200px"
40                 });
41             });
42 
43             $('button:eq(2)').click(function () {
44                 $('.main').css({
45                     "background-color":"blue"
46                 });
47             });
48 
49             $('button:eq(3)').click(function () {
50                 $('.main').css({
51                     "width":"300px",
52                     "height":"300px",
53                     "background-color":"#666"
54                 });
55             });
56 
57             $('button:eq(4)').click(function () {
58                 alert($('.main').width()+"px");
59             });
60         });
61     </script>
62 </head>
63 <body>
64 <button>变宽</button>
65 <button>变高</button>
66 <button>变色</button>
67 <button>三变</button>
68 <button>获取宽度，并弹窗</button>
69 <div class="main">
70     文字行号
71 </div>
72 </body>
73 </html>

 

posted @ 2017-11-02 21:33  QinXiao.Shou  阅读(379)  评论(0)    收藏  举报