html5中input的color颜色拾取器怎么用

发布时间：2022-01-20 15:54:57 作者：iii
来源：亿速云阅读：218

这篇文章主要介绍了html5中input的color颜色拾取器怎么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇html5中input的color颜色拾取器怎么用文章都会有所收获，下面我们一起来看看吧。

定义和用法

type 属性规定 input 元素的类型。

注释：该属性不是必需的，但是我们认为您应该始终使用它。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>color拾取器</title>
</head>
<body>
  <input type="color" id="color">
</body>
<script>
  document.querySelector("#color").onchange = function () {
    document.getElementById('color').click(); // 必须添加触发click事件否则不能通过点击确定按钮触发更改颜色
    document.body.style.background = this.value;
  }
</script>
</html>

下面看下HTML 5 <input> type 属性

属性值

值	描述
button	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox	定义复选框。
color	定义拾色器。
date	定义日期字段（带有 calendar 控件）
datetime	定义日期字段（带有 calendar 和 time 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地址的文本字段
file	定义输入字段和 "浏览..." 按钮，供文件上传
hidden	定义隐藏输入字段
image	定义图像作为提交按钮
number	定义带有 spinner 控件的数字字段
password	定义密码字段。字段中的字符会被遮蔽。
radio	定义单选按钮。
range	定义带有 slider 控件的数字字段。
reset	定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search	定义用于搜索的文本字段。
submit	定义提交按钮。提交按钮向服务器发送数据。
tel	定义用于电话号码的文本字段。
text	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url	定义用于 URL 的文本字段。

关于“html5中input的color颜色拾取器怎么用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“html5中input的color颜色拾取器怎么用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。

html5中input的color颜色拾取器怎么用

相关阅读