【前端案例】06 - 排他思想 + 页面换肤
2020-12-01 本文已影响0人
itlu
1. 排他思想
排他思想
-
当点击其中一个按钮的时候改变该按钮的背景颜色。并将其他按钮的背景颜色恢复。
-
需要利用一个排他思想：在设置选中的按钮之前需要将其他按钮的颜色恢复。
-
代码实现:
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
let btns = document.querySelectorAll('button');
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
// 先将所有按钮的背景颜色去掉
for (let i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'skyblue';
}
}
</script>
</body>
2. 页面换肤
页面换肤
-
为每一张图片循环设置点击事件，当点击某一张图片的时候修改
body的背景图片backgroundImage。并将当前设置的图片缩览图使用不同颜色的边框区别。 -
这里利用了排他思想实现选中某张图片标注不同颜色的边框。
-
代码实现：
* {
margin: 0;
padding: 0;
}
body {
background: url(../images/1.jpg) no-repeat center top;
background-size: cover;
box-sizing: border-box;
}
ul {
width: 1000px;
list-style: none;
padding: 0;
margin: 100px auto;
}
li {
float: left;
margin: 20px;
cursor: pointer;
border: 5px solid #fff;
}
li img {
/* 默认图片下面有一个空白缝隙需要转换为块级元素 */
display: block;
width: 200px;
}
<body>
<ul class="baidu">
<li><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
<li><img src="../images/4.jpg" alt=""></li>
</ul>
<script>
let img = document.querySelector('.baidu').querySelectorAll('img');
let li = document.querySelector('.baidu').querySelectorAll('li');
for (let i = 0; i < img.length; i++) {
img[i].onclick = function () {
document.body.style.backgroundImage = 'url(' + this.src + ')';
for (let j = 0; j < li.length; j++) {
li[j].style.borderColor = '#fff';
}
li[i].style.borderColor = 'pink';
}
}
</script>
</body>
