JQuery操作html（二）
阿新 • • 發佈：2020-12-10
addClass() - 向被選元素新增一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行新增/刪除類的切換操作
css() - 設定或返回樣式屬性
返回指定的 CSS 屬性的值，css("propertyname");
設定指定的 CSS 屬性，css("propertyname","value");
設定多個 CSS 屬性，css({"propertyname":"value","propertyname":"value",...});
width() 方法設定或返回元素的寬度（不包括內邊距、邊框或外邊距）。
height() 方法設定或返回元素的高度（不包括內邊距、邊框或外邊距）。
innerWidth() 方法返回元素的寬度（包括內邊距）。
innerHeight() 方法返回元素的高度（包括內邊距）。
outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
outerHeight() 方法返回元素的高度（包括內邊距和邊框）。
唯一需要注意的地方，設定了 box-sizing 後，width() 獲取的是 css 設定的 width 減去 padding 和 border 的值。
.test{width:100px;height:100px;padding:10px;border:10px;box-sizing:border-box;}
width() 獲取為: 60
innerWidth() 獲取值為: 80
outWidth() 獲取值為: 100
<html> <head> <script type="text/javascript" src="../js/jquery.min.js"></script> <meta charset="utf-8"> <title>魯迅</title> <script type="text/javascript"> $(document).ready(function() { //addClass() - 向被選元素新增一個或多個類(可以選取多個元素) $("#addClass").click(function() { $("p,b").addClass("blue important"); }); //removeClass() - 從被選元素刪除一個或多個類 $("#removeClass").click(function() { $("p").removeClass("blue"); }); //toggleClass() - 對被選元素進行新增/刪除類的切換操作 $("#toggleClass").click(function() { $("p").toggleClass("blue"); }); //返回指定的 CSS 屬性的值 $("#getcss").click(function() { alert("背景顏色 = " + $("p").css("background-color")); }); //設定指定的 CSS 屬性 $("#setcss").click(function() { $("p").css("background-color", "yellow"); }); //設定多個 CSS 屬性 $("#setcsss").click(function() { $("p").css({ "background-color": "yellow", "font-size": "200%" }); }); }); </script> <style type="text/css"> .important { font-weight: bold; font-size: xx-large; } .blue { color: blue; } </style> </head> <body> <button id="addClass">addClass</button> <button id="removeClass">removeClass</button> <button id="toggleClass">toggleClass</button> <button id="getcss">返回css值</button> <button id="setcss">設定css值</button> <button id="setcsss">設定csss值</button> <p style="background-color:#ff0000">願中國青年都擺脫冷氣，只是向上走，不必聽自暴自棄者流的話。</p> <p>能做事的做事，能發聲的發聲，有一分熱,發一分光，就令螢火一般，也可以在黑暗裡發一點光,不必等候炬火。</p> <p>此後如竟沒有炬火：我便是唯一的光.</p> <p>倘若有了炬火，出了太陽,我們自然心悅誠服的消失，不但毫無不平,而且還要隨喜讚美這炬火或太陽；</p> <p>因為他照了人類，連我都在內。</p> <p>我又願中國青年都只是向上走，不必理會這冷笑和暗箭。</p> <b>文字摘自魯迅《熱風·隨感錄四十一》</b> </body> </html>