js實現改變背景顏色
阿新 • • 發佈:2019-02-19
< input type=”color” >是一個取色器,本文主要介紹如何利用< input type=”color” >實現頁面背景顏色的改變(此程式碼可以用於頁面變化面板)
1.原理:
首先給body設一個背景顏色,當取色器中顏色改變時,通過js中的style動態改變背景顏色。
2.程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head >
<body style=" background: rgb(238, 255, 255);">
<input type="color" id="onchange">
</body>
<script type="text/javascript">
document.getElementById('onchange').onchange = function(){
document.getElementById('onchange').click();
document.body.style.background = this .value;
};
</script>
</html>
3.效果:
(1).首先顯示body最先設定的顏色
(2).點選取色器後,彈出顏色選擇
(3).選中顏色,點選確定,背景顏色被替換