jQuery中的樣式（七）：addClass()、removeClass()、toggleClass()、hasClass()、css()、width()、height()等
阿新 • • 發佈：2019-01-05
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>樣式</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <style type="text/css"> body{ font-family: "Microsoft YaHei" } .cGreen{color: #4CA902} .cPink{color: #ED4A9F} .cBlue{color: #0092E7} .cCyan{color: #01A6A2} .cYellow{color: #DCA112} .cRed{color: #B7103B} .cPurple{color: #792F7C} .cBlack{color: #110F10} .cOrange{color: #FF4500} .cGray{color: #A9A9A9} .hide{display: none;} span { float:left; } ul li { width:120px; float: left; margin-left: 10px; } .fBold{font-weight: bold;} </style> <script type="text/javascript"> /* addClass(class|fn)：為當前選擇節點新增特定樣式 removeClass(class|fn)：為當前選中節點刪除特定樣式 toggleClass(class|fn)：有就刪除，沒有就新增 hasClass(class|fn)：判斷是否存在class css(name|pro|[,val|fn]))：新增樣式 width()：無參時查詢寬度，有參時修改寬度 height()：無參時查詢高度，有參時修改高度 offset()：檢視相對位置，返回值是物件，可以得到left和top屬性。 */ $(document).ready(function() { // <input type="button" id="btn1" value="addClass()為美國城市新增cOrange類"> // 新增樣式class選擇器：addClass() $("#btn1").click(function() { $("#usa li").addClass("cOrange"); }); // <input type="button" id="btn2" value="removeClass()為美國城市去除cOrange類"> // 刪除樣式class選擇器：removeClass() $("#btn2").click(function() { $("#usa li").removeClass("cOrange"); }); // <input type="button" id="btn3" value="toggleClass()為美國城市新增或去除cOrange類"> // toggleClass()：有就刪除，沒有就新增！ $("#btn3").click(function() { $("#usa li").toggleClass("cOrange"); }); // <input type="button" id="btn4" value="hasClass()判斷是否中國城市(ul元素)是否有fBold類"> // hasClass()：判斷是否有某個class選擇器 $("#btn4").click(function() { console.log($("#chn").hasClass("fBold")); }); // <input type="button" id="btn5" value="css()將美國的城市字型加粗和顏色設定為藍色"> // css()：新增一段css() $("#btn5").click(function() { $("#usa li").css({"font-weight":"bold", "color":"#0092E7"}); }); // <input type="button" id="btn6" value="height()檢視城市(li元素)的高度並設定高度後再檢視設定後值 "> // height()：高度，無參時查詢，有參時修改。 $("#btn6").click(function() { console.log("原來城市的高度為："+$("ul li").height()); $("ul li").height(35); console.log("修改後的城市高度為："+$("ul li").height()); }); // <input type="button" id="btn7" value="width()檢視城市(li元素)的寬度並設定寬度後再檢視設定後值"> // width()：寬度，無參時查詢，有參時修改。 $("#btn7").click(function() { console.log("原來城市的寬度為："+$("ul li").width()); $("ul li").width(250); console.log("修改後的城市寬度為："+$("ul li").width()); }); // <input type="button" id="btn8" value="offset()檢視廣州和洛杉磯的相對位置"> // 相對位置：offset() $("#btn8").click(function() { var gzOffset = $("#gz").offset(); console.log("廣州的 left = "+gzOffset.left+", top = "+gzOffset.top); var laOffset = $("#la").offset(); console.log("洛杉磯的 left = "+laOffset.left+", top = "+laOffset.top); }); }); </script> </head> <body> <span>中國城市</span>：<br> <ul id="chn" class="fBold cOrange"> <li id="bj">北京</li> <li id="sh">上海</li> <li id="gz">廣州</li> <li id="sz">深圳</li> <li id="hk">香港</li> </ul> <br><br> <span>美國城市</span>：<br> <ul id="usa"> <li id="wst">華盛頓特區</li> <li id="ny">紐約</li> <li id="la">洛杉磯</li> <li id="scg">芝加哥</li> </ul> <br><br> <span>德國城市</span>：<br> <ul id="ger"> <li id="mnh">慕尼黑</li> </ul> <div style="clear:both;"></div> <br><br> <hr> <input type="button" id="btn1" value="addClass()為美國城市新增cOrange類"> <input type="button" id="btn2" value="removeClass()為美國城市去除cOrange類"> <input type="button" id="btn3" value="toggleClass()為美國城市新增或去除cOrange類"> <input type="button" id="btn4" value="hasClass()判斷是否中國城市(ul元素)是否有fBold類"> <input type="button" id="btn5" value="css()將美國的城市字型加粗和顏色設定為藍色"> <input type="button" id="btn6" value="height()檢視城市(li元素)的高度並設定高度後再檢視設定後值 "> <input type="button" id="btn7" value="width()檢視城市(li元素)的寬度並設定寬度後再檢視設定後值"> <input type="button" id="btn8" value="offset()檢視廣州和洛杉磯的相對位置"> </body> </html>