<html>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</html>
<script>
// 获取所有按钮元素
var btns = document.getElementsByTagName('button')
// btns得到的是一个伪数组,里面的每一个元素 btns[i]
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>
排他思想:先排除其他人,然后再设置自己的样式。
getElementsByTagName():获取页面元素的合集,是一个对象,所以我们这里能通过遍历获取值。