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>
