js实现改变背景颜色

< input type=”color” >是一个取色器,本文主要介绍如何利用< input type=”color” >实现页面背景颜色的改变(此代码可以用于页面变化皮肤)

1.原理:

首先给body设一个背景颜色,当取色器中颜色改变时,通过js中的style动态改变背景颜色。

2.代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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最先设置的颜色
js实现改变背景颜色_第1张图片

(2).点击取色器后,弹出颜色选择
js实现改变背景颜色_第2张图片

(3).选中颜色,点击确定,背景颜色被替换
js实现改变背景颜色_第3张图片

你可能感兴趣的:(编程,总结)