注意排它思想一定是先干掉其它人,再设置自己
练习:按钮点击
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//1.获取所有按钮元素
var btns=document.getElementsByTagName('button');
//btns得到的是伪数组,里面每个元素是btns[i]
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
//1.我们先把所有按钮背景颜色去掉
for(var i=0;i<btns.length;i++){
btns[i].style.backgroundColor='';
}
//2.然后才让当前元素背景颜色变得pick
this.style.backgroundColor='pink';
}
}
</script>
</body>
练习:百度换肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(bg1.jpg) repeat ;
}
li{
list-style: none;
}
.baidu{
/* 是否显示滚动条 */
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li{
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img{
width: 100px;
}
</style>
</head>
<body>
<!-- 百度换肤:
核心算法:把当前图片的src路径取过来,给body做背景 -->
<div class="baidu">
<li><img src="bg1.jpg" alt=""></li>
<li><img src="bg2.jpg" alt=""></li>
<li><img src="bg3.jpg" alt=""></li>
<li><img src="bg4.jpg" alt=""></li>
</div>
<script>
//1.获取元素
//先把class=baidu找出来再找里面img
var imgs=document.querySelector('.baidu').querySelectorAll('img');
//2.循环注册事件
for(var i=0;i<imgs.length;i++){
imgs[i].onclick=function(){
//this.src就是我们点击图片的路径
//把this.src给body换背景
console.log(this.src);
document.body.style.backgroundImage='url('+this.src+')';
}
}
</script>
</body>
</html>