首先，定義五個按鈕和一個div，div用來展示對應的效果變化
<button id="btn1">變寬</button> <button id="btn2">變高</button> <button id="btn3">變色</button> <button id="btn4">隱藏</button> <button id="btn5">重置</button> <div id="mydiv"></div> 對應的事件代碼如下： <script> var btn = document.querySelectorAll("button"); var mydiv = document.getElementById("#mydiv");$(btn[0]).click(function () { $("#mydiv").css({ width: "300px" }); });
$(btn[1]).click(function () { $("#mydiv").css({ height: "300px" }); });
$(btn[2]).click(function () { $("#mydiv").css({ "background-color": "red" }); });
$(btn[3]).click(function () { $("#mydiv").hide(); });
$(btn[4]).click(function () { $("#mydiv").css({width: "200px", height: "200px", "background-color": "black", "margin-left": "43%", "margin-top": "10px"}); $("#mydiv").show(); }); </script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/915.html
標籤：jQuery
上一篇：Jquery所有獲取物件
下一篇：滑動到當前位置，數字遞增效果