js练习：换肤

原创已于 2022-12-19 15:03:10 修改 · 485 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #前端

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

JavaScript园地专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的网页项目，通过点击不同的图片来切换页面背景。使用HTML、CSS和JavaScript实现了图片预览功能，并允许用户轻松地改变网站背景。具体实现包括设置初始背景、绑定点击事件以更改背景图片。

文章目录

功能实现：点击该图片让背景变成该图片
思路：设置默认第一张为背景，获取元素，利用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>