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.valueipt.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.valueipt.addEventListener('input',function(e){div.style.backgroundColor=e.target.value},false)</script></body>
</html>
