1. 程式人生 > >js實現改變背景顏色

js實現改變背景顏色

< 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).選中顏色,點選確定,背景顏色被替換
這裡寫圖片描述