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

<!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. 线特征---LineMatching原理（四）

    参考文章:An efficient and robust line segment matching approach based on LBD descriptor and pairwise geo ...

  2. go语言使用go-sciter创建桌面应用(三) 事件处理，函数与方法定义，go与tiscript之间相互调用

    sciter处理脚本tiscript,用于处理UI交互中的一些逻辑,跟js很像,但又有点区别,对前端熟悉的人应该能很快上手. tiscrip脚本文档 https://sciter.com/develo ...

  3. [z]vc boost安装

    1.下载boost_1_43_0.zip(具体到哪里下载,自己搞定) 2.解压boost_1_43_0.zip(我的是直接解压放在F盘) 3.启动vc的Command Prompt编译生成bjam.e ...

  4. poj 2828(线段树 逆向思考) 插队是不好的行为

    http://poj.org/problem?id=2828 插队问题,n个人,下面n行每行a,b表示这个人插在第a个人的后面和这个人的编号为b,最后输出队伍的情况 涉及到节点的问题可以用到线段树,这 ...

  5. HDU_1142(最短路 + dfs)

    Jimmy experiences a lot of stress at work these days, especially since his accident made working dif ...

  6. nim博弈

    尼姆博弈 1.问题模型:有三堆各若干个物品,两个人轮流从某一堆取任意多的物品,规定每次至少取一个,多者不限,最后取光者得胜. 2.解决思路:用(a,b,c)表示某种局势,显证(0,0,0)是第一种奇异 ...

  7. mysql 5.7.17 建立主从数据库

    ---恢复内容开始--- 1.确定主/从数据库地址; 2.将主数据库的database dump出来 windows平台用workbench; 其他可以参考: 这位同仁写的比较详细了.我就不谢了.打开 ...

  8. PS故障风海报制作技术分享

    1.首先找一张看起来很酷的图(也可以选择自己喜欢的图片): 2. 复制图层,点击添加图层样式,选择混合选项,在高级混合里面的通道选项,有R.G.B三个通道选项,默认是全部勾选的状态,选择其中一个勾掉( ...

  9. Spring PropertyResolver 占位符解析（一）API 介绍

    Spring PropertyResolver 占位符解析(一)API 介绍 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html ...

  10. Linux 开启定时计划任务

    1.crontab 编辑“crontab -e # m h dom mon dow command30 18 * * * lynx -dump http://admin.koala.xxx 30 18 ...