JQuery--jQquery控制CSS樣式
阿新 • • 發佈：2017-11-02
jquery nbsp color blue -c lang log htm body
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樣式