标签:测试 title ack btn har add button html ext
jQuery 拥有若干进行 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>
标签:测试 title ack btn har add button html ext
原文地址:https://www.cnblogs.com/xianya/p/9853140.html