排他思想的学习和一些使用

<button> 按钮1</button>
<button> 按钮2</button>
<button> 按钮3</button>
<button> 按钮4</button>
<button> 按钮5</button>

目标 就是在页面点击那个按钮，那个按钮的背景颜色就变成红色 ，在这样的情况下 我们就可以使用排他思想解决。 通俗点就是 先获取所有元素 ，去掉他们的属性 ，在目标元素设置相应的属性

<script>

//第一步获取所有元素

var btns=document.getElememtsByTagName("button");

//btns是个伪数组 有btns[i]表示 可以使用for循环访问每个元素

for( var i = 1;i <btns.length;i++){

btns[i].οnclick=function(){

//去掉属性

for( var i = 1;i <btns.length;i++){

btns[i].style.backgroundColor=' ';

//在选择的按钮上添加属性

this.style.backgroundColor='red';

}

}

</script>

排他思想就是 开始去掉属性 然后添加属性 干掉他人 留下自己

实战  做个换肤效果 

 点击那个图片    背景就变成这个图片

<ul class='btns'> 
    <li><img src='images/1'></li>
    <li><img src='images/2'></li>
    <li><img src='images/3'></li>
    <li><img src='images/4'></li>
</ul>


<script>
//取所有元素
var btns=document.querySelector('.btns').querySelectorAll('img');
for (var i = 1; i< btns.length;i++){
btns[i].onclick=function(){
document.body.style.backgroundImage='url+('this.src+')';
}
</script>