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>JQuery--jQquery控制CSS样式
原文地址：http://www.cnblogs.com/mrszhou/p/7774633.html