一、点击事件和获取颜色值

<!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>

[HTML5] 颜色选择器的操作[input type='color'....]的更多相关文章

  1. html5 input type="color"边框伪类效果

    html5为input提供了新的类型:color <input type="color" value="#999" id="color" ...

  2. 给<input type="color">设置默认值

    参考:https://stackoverflow.com/questions/14943074/html5-input-colors-default-color?utm_medium=organic& ...

  3. input type color

    <input type="color"> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input ...

  4. input type=color 设置颜色

    在设置背景色的时候,使用html5 type=color 标签,但是初始值一直都是黑色的,背景如果没有设置的时候,应该是白色,比如文本图元,所以需要设置一个初始的颜色值, 注意: value不实用,怎 ...

  5. Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互

    <input>        无限制输入     type    限制输入 type = 如下类型     type 后还可以跟一些属性: 如<input type=text max ...

  6. jQuery操作<input type="radio">

    input type="radio">如下: <input type="radio" name="city" value=&qu ...

  7. jQuery操作 input type=checkbox的实现代码

    代码如下: <input type="checkbox">: 2012欧洲杯"死亡之组"小组出线的国家队是:<br> <input ...

  8. HTML5的input color系统颜色选择器

    前两天,我写了一篇<推荐两款jQuery色盘选择器>介绍,那是使用JavaScript实现的色盘,今天我给大家介绍HTML5的色盘选择器.HTML5有一个input类型为color,即颜色 ...

  9. Html5学习3(拖放、Video(视频)、Input类型(color、datetime、email、month 、number 、range 、search、Tel、time、url、week ))

    1.Html拖放 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. echarts柱状图图例不显示的问题

    如果想要图例有效果,legend中数据要和series中name的值保持一致,切记切记,这是我曾经遇到的坑,不保持一致是没有效果的

  2. 以太坊难度炸弹是什么?极大抑制矿工继续以POW方式挖矿!

    以太坊的“难度炸弹”(“Difficulty Bomb”)指的是,在挖掘算法中,使用以太币在区块链上对矿工进行奖励的难度越来越大.随着游戏变得更加复杂(矿工发现以太币难挣得多),在以太坊区块链上块的生 ...

  3. xml转化为Dictionary

    代码 public SortedDictionary<string, object> FromXml(string xml) { SortedDictionary<string, o ...

  4. C#使用MiniDump捕获异常

    c/c++语言里MiniDump是一个重要的调试手段,他们没有C#/java这样语言有很多异常输出信息( JVM异常导出bug日志功能,通常在jdk目录,文件格式hs_err_%pid%.log,pi ...

  5. rem初始化

    使用css实现rem适配,头部引入即可 adaptive.js !function(e, t) { function i() { o = , e.devicePixelRatioValue = o, ...

  6. 使用开源的工具解析erspan流量

    Decapsulation ERSPAN Traffic With Open Source Tools Posted on May 3, 2015 by Radovan BrezulaUpdated ...

  7. linux 和 主机通信的另类方法

    偶然发现,linux可以从github上直接下载代码.这样就能用windows写好代码,直接给linux来跑了.很方便. 当然是因为我还不会配置网络来让linux和windows通信.弄了一个下午也没 ...

  8. java 多态的深入理解

    简单来说 : 多态 能够很好的解决代码耦合性的问题 考虑这样一个场景 有个人 买了辆捷达汽车 .这个系统应该如何设计呢? public class JettaCar { public void run ...

  9. 在Eclipse中运行JAVA代码远程操作HBase的示例

    在Eclipse中运行JAVA代码远程操作HBase的示例 分类: 大数据 2014-03-04 13:47 3762人阅读 评论(2) 收藏 举报 下面是一个在Windows的Eclipse中通过J ...

  10. collection tree protocol

    本文所属图书 > 传感网原理与技术 本书根据<高等院校物联网工程专业发展战略研究报告暨专业规范(试行)>和物联网工程本科专业的教学需要,结合传感网的最新发展及其应用现状编写而成.主要 ...