排他操作简介

最新推荐文章于 2025-12-10 11:05:52 发布

原创最新推荐文章于 2025-12-10 11:05:52 发布 · 438 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript

本文介绍了一个HTML页面中使用JavaScript实现的按钮点击事件，当点击任一按钮时，所有按钮的背景颜色会被重置，触发点击的按钮会变为粉色。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>

<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 i = 0; i < btns.length; i++) {
                           btns[i].style.backgroundColor = '';
                       }
                       this.style.backgroundColor = 'pink';
                   }
               }
           </script>
       </body>