JavaScript按钮排他思想

  • A+
所属分类:Web前端
摘要

有一系列按钮,要求每单击其中一个,该按钮改变样式(以背景颜色为例),其他按钮恢复保持默认样式。


要求:

有一系列按钮,要求每单击其中一个,该按钮改变样式(以背景颜色为例),其他按钮恢复保持默认样式。

实现思路:

  1. 获取所有按钮元素
  2. 首先先把其他按钮的背景颜色去掉
  3. 再单独设置自己的样式

代码实现:

仅展示<body></body>标签内的内容

<body>     <button>按钮1</button>     <button>按钮2</button>     <button>按钮3</button>     <button>按钮4</button>     <button>按钮5</button>     <script>         var btns = document.getElementsByTagName('button');         // 获取所有按钮元素         for (var i = 0; i < btns.length; i++) {             btns[i].onclick = function() {                 for (var j = 0; j < btns.length; j++) {                     btns[j].style.backgroundColor = '';                 }                 // 先把其他按钮的背景颜色去掉                 this.style.backgroundColor = 'red';                 // 单独设置自己的样式             }         }     </script> </body>