您的位置：首页 > Web前端 > JavaScript

js实现<input type="color">改变背景颜色

2017-04-26 19:41 726 查看

< 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).选中颜色，点击确定，背景颜色被替换

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： input-colo 背景颜色 js

相关文章推荐

新的分享

章节导航