如何用JavaScript编写点击按钮实现颜色变化的代码？

本文共计425个文字，预计阅读时间需要2分钟。

原文示例：本文实例为大家分享了JavaScript实现点击按钮变色的一系列代码，供大家参考。具体内容如下：+ 效果如下：+ 代码如下：在本次案例中，主要用到的技术是HTML部分+输入我们所需按钮的数量

改写后：“本文展示了如何使用JavaScript实现点击按钮变色的功能，并提供参考代码。具体内容如下：+ 变色效果：+ 代码示例：本例中，关键在于HTML部分+输入所需按钮数量。

本文实例为大家分享了javascript实现点击按钮变色的具体代码，供大家参考，具体内容如下

效果如下:

代码如下:

在这个案例中主要用到的是排他思想

html部分

输入我们所需要的按钮个数

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

css部分

<style type="text/css">             button {                 border: 1px solid cornflowerblue;                 border-radius: 3px;                 margin-left: 14px;             } </style>

script部分

<script type="text/javascript">     //获取所有按钮元素     var btns = document.getElementsByTagName("button");     //btns得到的值是一个伪数组  ,里面的每一个button元素都为btns[i]     // console.log(btns);     // 对数组进行遍历     for (var i = 0; i < btns.length; i++) {         //给每一个button按钮绑定点击事件         btns[i].onclick = function () {             // 先把所有的颜色全部清空             for (var i = 0; i < btns.length; i++) {                 btns[i].style.backgroundColor = "";             }             //再把当前元素的背景颜色添加上             this.style.backgroundColor = "pink";           }     } </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。