jQuery-獲取並設置CSS
阿新 • • 發佈：2018-10-26
ogg remove cti type ont 屬性 pre utf-8 addclass
jQuery 擁有若幹進行 CSS 操作的方法：
- addClass() - 向被選元素添加一個或多個類
- removeClass() - 從被選元素刪除一個或多個類
- toggleClass() - 對被選元素進行添加/刪除類的切換操作
- css() - 設置或返回樣式屬性
addClass() 向被選元素添加一個或多個類
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script> $(document).ready(function() { $("#btn").click(function() { $("p").addClass("addcss"); }); }); </script> <style> .addcss{ color: #FF0000; } </style> </head> <body> <p>測試追加樣式</p> <button id="btn">追加樣式</button> </body> </html>
removeClass() 從被選元素刪除一個或多個類
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <style> .removecss { color: #FF0000; font-weight: bold; } </style> <script> $(document).ready(function() { $("button").click(function() { $("p").removeClass("removecss"); }); }); </script> </head> <body> <p class="removecss">測試追加樣式</p> <button>移除樣式</button> </body> </html>
toggleClass() 對被選元素進行添加/刪除類的切換操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <style> .togglecss { color: #FF0000; font-weight: bold; } </style> <script> $(document).ready(function() { $("button").click(function() { $("p").toggleClass("togglecss"); }); }); </script> </head> <body> <p class="togglecss">測試追加樣式</p> <button>切換樣式</button> </body> </html>
css() 設置或返回樣式屬性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("p").css({"color":"blue","font-size":"200%"}); alert($("p").css("color")); }); }); </script> </head> <body> <p style="color: #FF0000;">測試追加樣式</p> <button>設置返回樣式</button> </body> </html>
jQuery-獲取並設置CSS