排他思想

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>

 

posted @ 2021-02-24 11:42  棉花糖88  阅读(107)  评论(0编辑  收藏  举报