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

<!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. 访问注解（annotation）的几种常见方法

    java的注解处理器类主要是AnnotatedElement接口的实现类实现,为位于java.lang.reflect包下.由下面的class源码可知AnnotatedElement接口是所有元素的父 ...

  2. 微信小程序 wxml中的属性记录

    1. view 标签中的属性 style 中的参数 margin-top:10px;  (向上距离) display : flex;  (display : flex 容器声明) flex-direc ...

  3. EF利用重写SaveChanges()方法实现 审计日志记录

    先上一段最近项目中的代码,此代码可以放到自己项目中的dbContext中 public override Task<int> SaveChangesAsync() { List<Au ...

  4. [z]dbms_stats.lock_table_stats对于没有统计信息的表分区同样有效

    常见的分区表DDL如 split partition.add partition都会生成没有统计信息的表分区table partition,长期以来我对dbms_stats.lock_table_st ...

  5. .netcore webapi iis 虚拟目录下载apk文件

    首先贴上微软的文档:https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files 参考网址:http://www.cnb ...

  6. MongoDb进阶实践之八 MongoDB的聚合初探

    一.引言 好久没有写东西了,MongoDB系列的文章也丢下好长时间了.今天终于有时间了,就写了一篇有关聚合的文章.一说到“聚合”,用过关系型数据库的人都应该知道它是一个什么东西.关系型数据库有“聚合” ...

  7. 2Q - Fibbonacci Number

    Your objective for this question is to develop a program which will generate a fibbonacci number. Th ...

  8. vs2015 npm list 更新问题

    在更新npm list时候,经常会非常的慢,今天试了一个诡异的方法,就是在文件夹下面直接把所有缓存全部删除,全部重新下,结果感觉反而速度快很多. 原来的更新包80M竟然1个小时没有下载完. C:\Us ...

  9. pthon 反转嵌套的list

    def rev_recursive(li): try: iterator = iter(li) except TypeError: return li l = [] for item in itera ...

  10. 知名APP（支付宝、微信、花瓣等）首页设计技巧及原型实例讲解

    APP首页设计对APP自身来说是至关重要的,一款优秀的APP产品,其首页设计不仅需要清晰的展示产品核心功能,给用户创造良好的用户体验,而且还需要展示公司的品牌形象,提升在用户心中的品牌认知度.今天,就 ...