给按钮一个颜色，实现hover,点击变色效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #main{ position:relative; display:inline-block; } button{ height:30px; line-height: 30px; background:rgba(0,0,0,0); font-size: 14px; padding:0px 15px; outline:none; border:none;s } .divCan{ position: absolute; top:0; left:0; 100%; height:100%; z-index: -10001; background: green; } </style> </head> <body> <div id="main"> <button>按扭</button> <div class="divCan"></div> </div> <script type="text/javascript"> var btn=document.getElementsByTagName('button')[0]; console.log(btn) btn.onclick=function(e){ console.log(1) this.style.backgroundColor="rgba(0,0,0,0.20)" } btn.onmouseover=function(e){ this.style.backgroundColor="rgba(0,0,0,0.09)" } btn.onmouseout=function(e){ this.style.backgroundColor="rgba(0,0,0,0)" } </script> </body> </html>
这个其实还有点不正常；颜色出现覆盖了，且没有顺序可以言，想更好的控件按钮的颜色 可以通过添加，删除class来实现，可以出现多个class能过他们的放的位置从面能有不同的效果；有兴趣的可以试下。