排他思想:
我们想要某一个元素实现某种样式,需要用到循环的排他思想:
1.所有元素全部清楚样式
2.给当前元素设置样式(留下我自己)
3.注意顺序不能颠倒,首先干掉其他人,再设置自己
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
1. //获取所有元素
var btns = document.getElementsByTagName('button');
//btn得到的是伪数组 里面的每一个元素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 = '';
}
//然后才让当前的元素背景颜色为pink
this.style.background = 'pink';
}
}
</script>
</body>
</html>
案例:模仿百度换肤效果
- 这个案例联系的是给一组元素注册事件
- 这四个小图片利用循环注册点击