javascript实现点击按钮变色
更新时间：2022年07月03日 11:25:59 作者：Favour72
这篇文章主要为大家详细介绍了javascript实现点击按钮变色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要给大家介绍了关于利用js判断数据是否是数组或字符串的常见方法,其实有很多方法可以判断数据是否是数组或字符串,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了js实现使用鼠标拖拽切换图片的方法,涉及javascript操作图片实现轮播效果的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
这篇文章主要介绍的是javascript时间格式format函数，我们有时候调用的new Date()不是格式化的时间，可能显示不是很正常，那么这时候就需要格式化时间，今天这里分享一个javascript的foramt()函数，有需要的可以参考借鉴。2016-08-08
这篇文章主要为大家介绍下通过firefox的FireBug调试JS，需要的朋友可以参考下2013-12-12
解决layui的table插件无法多层级获取json数据的问题
今天小编就为大家分享一篇解决layui的table插件无法多层级获取json数据的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了浅析javascript中函数声明和函数表达式的区别,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了TypeScript 类型编程之索引类型递归去掉可选修饰，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
javascript中的nextSibling使用陷(da)阱(keng)
关于HTML/XML节点的问题，在IE中nextSibling不会返回文本节点，而chrome或者firefox等会返回文本节点2014-05-05
下面小编就为大家带来一篇JavaScript数据操作_浅谈原始值和引用值的操作本质。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要为大家详细介绍了js实现简单的秒表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
最新评论