《JavaScript》dom BOM点击图片为背景皮肤

最新推荐文章于 2023-02-08 20:08:33 发布

glglgl1

最新推荐文章于 2023-02-08 20:08:33 发布

阅读量1.3k

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/glglgl1/article/details/123696573

版权

这篇博客介绍了如何使用JavaScript实现点击图片将图片设置为网页背景。通过CSS设置初始背景，然后通过获取图片元素并监听点击事件，将点击的图片源赋值给body的背景图片属性，从而改变页面背景。

摘要由CSDN通过智能技术生成

<style>
		*
		{
			margin: 0;
			padding: 0;
		}
		
		body
		{
			background-ur1(img/1.jpg) no-repeat center top;
		}
		
		li
		{
			list-style: none;
		}
		
		.baidu
		{
			overflow: hidden;
			margin: 200px auto;
			background-color: aqua;
			width: 200px;
			padding-top: 10px;
		}

		</style>
	</head>
	<body>
		<ul class="baidu">
			<li><img src="img/1.jpg"</li>
			<li><img src="img/2.jpg"</li>
			<li><img src="img/3.jpg"</li>
			<li><img src="img/4.jpg"</li>
		</ul>
		<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+')';
			}
		}
		</script></