欢迎光临
我的个人博客网站

JavaScript按钮排他思想


要求:

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

实现思路:

  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> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript按钮排他思想
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏