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

<!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. bean生命周期_Junit测试使用factory模式

    在面试某互联网_保险 公司, 被问到了spring中bean的生命周期,不禁联想到我们之前作 junit测试时,使用了Factory模式,而没有用Mock.

  2. VML、SVG、Canvas简介

    1.VML: VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途,VML只是被IE支持. ...

  3. c语言使用指针对int数组的求和

    #include <stdio.h> int sump(int *, int *); int main(void) { , , , , }; printf()); ; } int sump ...

  4. springBoot整合Quarzt2.3

    首先,你要配置好springboot的配置(在resources下) 我把其改为application.yml # Tomcat server: tomcat: uri-encoding: UTF-8 ...

  5. 14.Mysql事务控制和锁定

    14.事务控制和锁定存储引擎和锁: MyISAM和MEMORY存储引擎的表支持表级锁: BDB存储引擎的表支持页级锁: InnoDB存储引擎的表支持行级锁.默认情况下,表锁和行锁都是根据执行的语句自动 ...

  6. 用MySQL的朋友们请不要使用"utf8"，请使用"utf8mb4"

    转自:    (译)用MySQL的朋友们请不要使用"utf8",请使用"utf8mb4" 用MySQL的朋友们请不要使用"utf8",请使用 ...

  7. hdu 2289 要二分的杯子

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2289 大意是 一个Cup,圆台形,给你它的顶部圆的半径,底部圆的半径,杯子的高度,和此时里面装的水的体 ...

  8. linux使用笔记4

    运行已经安装好的软件: cd到这个软件的安装目录 输入命令/:./软件名称 就可以了 运行geoserver 1.首先需要添加JAVA_HOME的环境变量: 在服务器没有设置JAVA_HOME的情况下 ...

  9. 安装php_sqlsrv扩展

    https://www.cnblogs.com/wtcl/p/7727636.html

  10. Partition Equal Subset Sum

    Given a non-empty array containing only positive integers, find if the array can be partitioned into ...