<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
body {
height: 100vh;
}
ul {
width: 410px;
list-style: none;
}
li {
float: left;
margin: 0 1px;
cursor: pointer;
}
img {
width: 100px;
height: 100px;
}
.s {
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<ul class="clearfix">
<li><img src="6.jpg" alt=""></li>
<li><img src="7.jpg" alt=""></li>
<li><img src="9.jpg" alt="" class="s"></li>
<li><img src="哥11.jpg" alt=""></li>
</ul>
<script>
var imgs = document.querySelector('.clearfix').querySelectorAll('img');
var body = document.body;
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// console.log(this.src);路径
// 路径给body
body.style.background = 'url(' + this.src + ') no-repeat center';
body.style.backgroundSize = '200px';
}
}
</script>
</body>
</html>
换皮肤(js小案例)
最新推荐文章于 2022-05-20 00:11:41 发布