jq基础3——样式 叁歲伎倆 2022-10-01 06:58 134阅读 0赞 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> </head> <body> <script src="jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#b1").click(function(){ $("#div1").addClass("pink");//增加 }); $("#b2").click(function(){ $("#div1").removeClass("pink");//删除 }); $("#b3").click(function(){ $("#div1").toggleClass("pink");//切换 }); $("#b4").click(function(){ $("#div1").css("background-color","pink");//设置单一样式 }); $("#b5").click(function(){ $("#div1").css({ "background-color":"pink","color":"red"});//设置多种样式 }); }); </script> <style type="text/css"> .pink{ background-color: pink; } </style> <div id="div1">hello jquery</div><br> <button id="b1">增加背景色</button> <button id="b2">删除背景色</button> <button id="b3">切换背景色</button> <br> <button id="b4">设置单一样式</button> <button id="b5">设置多种样式</button> </body> </html>
还没有评论,来说两句吧...