js实现按钮点击变色，其他的按钮恢复默认颜色

JavaScript实现按钮点击变色，其他的按钮恢复默认颜色，则需通过循环实现，当有按钮点击的时候，先将所有的按钮的颜色，更改为空，然后在针对，鼠标点击的相应的按钮，进行更改按钮颜色；onclick实现按钮点击后的操作；...

异想实验室

10271人浏览 · 2022-08-19 00:08:26

异想实验室 · 2022-08-19 00:08:26 发布

JavaScript实现按钮点击变色，其他的按钮恢复默认颜色，则需通过循环实现，当有按钮点击的时候，先将所有的按钮的颜色，更改为空，然后在针对，鼠标点击的相应的按钮，进行更改按钮颜色；

onclick实现按钮点击后的操作；

效果预览：

主要JavaScript代码：

<script>
  var but=document.getElementsByTagName('button');
  for (var i = 0; i < but.length; i++) {
    but[i].onclick=function (){
      for (var i = 0; i < but.length; i++) {
        but[i].style.backgroundColor='';
      }
      this.style.backgroundColor='pink';
    }
  }
</script>

全部HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排它思想-js实现按钮点击变色，其他的按钮恢复默认颜色</title>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>

</body>
<script>
  var but=document.getElementsByTagName('button');
  for (var i = 0; i < but.length; i++) {
    but[i].onclick=function (){
      for (var i = 0; i < but.length; i++) {
        but[i].style.backgroundColor='';
      }
      this.style.backgroundColor='pink';
    }
  }
</script>
</html>

附鼠标各种操作事件命令；

onclick: 鼠标单击触发

ondblclick: 双击触发

onmouseover: 鼠标移动上面触发

onmouseout: 鼠标离开时触发

onmousemove: 鼠标在上面移动时触发