js练习：换肤

人生苦短@我用python

已于 2022-12-19 15:03:10 修改

阅读量390

点赞数 1

分类专栏： JavaScript园地文章标签： javascript 学习前端

于 2022-11-02 09:04:49 首次发布

本文链接：https://blog.csdn.net/Pythonwudud/article/details/127645074

版权

JavaScript园地专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

功能实现：点击该图片让背景变成该图片
思路：设置默认第一张为背景，获取元素，利用for循环给所有的li绑定一个点击事件，然后修改样式（改背景图片），实现点击随意图片切换背景

效果展示
在这里插入图片描述

HTML

在这里插入图片描述

css

在这里插入图片描述

	<style>
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background-image: url('img/img01.jpg');
			/* background-size: 100%; */
		}
		li {
			list-style: none;
		
		}
		.baidu{
			margin: 100px auto;
			width: 410px;
			overflow: hidden;
			padding-top: 3px;
			background-color: #fff;
			
		}
		.baidu li{
			float: left;
			margin: 0 1px;
			cursor: pointer;
			
		}
		.baidu img{
			width:100px;
		}
	</style>
	<body>
		<ul class="baidu">
			<li><img src="img/img01.jpg"></li>
			<li><img src="img/img02.jpg"></li>
			<li><img src="img/img03.jpg"></li>
			<li><img src="img/img04.jpg"></li>
		</ul>
		
	</body>
	<script>
		var imgs = document.querySelector('.baidu').querySelectorAll('img');
		
		for ( var i = 0; i<imgs.length; i++){
			imgs[i].onclick = function(){
				document.body.style.backgroundImage = "url("+this.src+")";
				// console.log(document.body.style.backgroundImage=(this.src));
			}
			
		}
		
		
	</script>