排他思想
1）排他思想
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//1 获取所有按钮元素
var btns = document.getElementsByTagName('button');
//2 给每一个元素添加onclick事件
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
//1 先for循环把所有的元素的背景色清除 [干掉所有人]
for (var i=0; i <btns.length;i++) {
btns[i].style.backgroundColor = '';
}
//2 让后让当前的背景颜色变成红色 [留下我自己]
this.style.backgroundColor = 'red';//选中的按钮颜色变成红色
}
}
//首先先排除其他人 然后再设置自己的样式 这种排除其他人的思想我们称为排他思想
</script>
</body>
百度换肤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>百度换肤效果</title> <style> * {margin: 0;padding: 0;} body {background: url(image/1.jpg) no-repeat center top;} 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> <ul id ="baidu"> <li><img src="image/1.jpg"></li> <li><img src="image/2.jpg"></li> <li><img src="image/3.jpg"></li> <li><img src="image/4.jpg"></li> </ul> <script> //核心思路 //1 给四个小图片用循环注册点击事件 //2 当我们点击了这个图片 我们把页面背景图片修改为当前的图片 //3 核心算法：把当前图片的src路径取过来 给body作为背景即可 //1 获取所有的图片 var baidu = document.getElementById('baidu');//获取到ul var imgs = baidu.getElementsByTagName('img');//获取到ul里面的所有图片 //2 给每一个图片添加点击事件 for (var i = 0; i< imgs.length; i++) { imgs[i].onclick = function () { //this.src 就是当前点击图片的路径 //把这个路径给body的背景图片地址 document.body.style.backgroundImage = 'url(' + this.src + ')'; } } </script> </body> </html>
