JavaScript实现动态背景颜色_html js 改变背景颜色-CSDN博客

本文链接：https://blog.csdn.net/lplovewjm/article/details/134598623

本文详细介绍了如何使用JavaScript配合HTML和CSS实现网页背景颜色的动态变化，包括HTML结构中的color输入框、CSS样式设置和JavaScript的事件监听功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript实现动态背景颜色

前言
实现过程
HTML实现过程
CSS实现过程
JS实现过程
全部源码

前言

本文主要讲解JavaScript如何实现动态背景颜色，可以根据颜色选择器选择的颜色而实时更新到背景中，如下图所示。
在这里插入图片描述

当我们在颜色选择器中改变颜色时，会实时的更新我们所选择的颜色值。那么好本文正式开始。

实现过程

HTML实现过程

HTML结构就两个
一个id为container的div
一个id为ipt的input
本文主要使用到的是HTML5新增的input标签type属性为Color的颜色选择器，当我们想要改变页面背景，就可以通过这个input颜色选择器来实现。

<div id="container">
		<input type="color" id="ipt" change="btn()">
	</div>

CSS实现过程

CSS主要就是对这个div进行宽高的设置以及全局设置
全局设置就是把外内边距都设置成0,也就是用到全局选择器*
这里用的是id选择器。也就是#container来进行样式
#container的样式为height：100vh，因为div是块级标签，它默认就是宽度为100%。所以不对宽度进行设置。

*{
		margin:0;
		padding:0;
	}
	#container{
		height:100vh;
	}

JS实现过程

定义了两个变量ipt和div，用于存储input和div的DOM元素，从而控制input和div。
在全局作用域script中把color的初始值赋值给div的背景颜色，因为这里没做任何color赋值，所以input中的color值就为#000000原始值。
为input添加监听，就是给变量ipt进行监听，监听类型为input，另外里面装的也是，div的背景颜色等于ipt的value值，value值就是颜色。那么到这里就可以实现，当input颜色发生改变时，div的背景颜色也会随之改变。

<script>
			let ipt=document.getElementById('ipt')
			let div=document.getElementById('container')
			div.style.backgroundColor=ipt.value
			ipt.addEventListener('input',function(e){
				div.style.backgroundColor=e.target.value
			},false)
		</script>

全部源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#container{
				height:100vh;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<input type="color" id="ipt" change="btn()">
		</div>
		<script>
			let ipt=document.getElementById('ipt')
			let div=document.getElementById('container')
			div.style.backgroundColor=ipt.value
			ipt.addEventListener('input',function(e){
				div.style.backgroundColor=e.target.value
			},false)
		</script>
	</body>
</html>