點選按鈕效果（button）
阿新 • • 發佈：2021-02-03
技術標籤：javawebjavascript
1.去掉邊框效果
border:none;
<html lang="en"> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <style> .btn{border: none;} </style> </head> <body> <button class="btn">helllo</button> </body> </html>
效果：
前
後
2.設定簡單的for迴圈按鈕可變不同顏色（未實現再次點選取消效果）
<html lang="en"> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <style> .btn{border: none;background-color: #d49797;} </style> </head> <body> <button class="btn">helllo1</button> <button class="btn">helllo2</button> <button class="btn">helllo3</button> <script> btns=document.querySelectorAll(".btn"); for(let index=0;index<btns.length;index++){ const btn=btns[index]; btn.onclick=()=>{ btn.style.backgroundColor="red"; } } </script> </body> </html>
初始效果：
點選後：
