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>
初始效果:
点击后: