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>
