1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .main{ 8 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>