H5 input新增type属性color颜色拾取器

#麻辣小龙虾#

已于 2023-04-18 10:02:44 修改

阅读量4.1k

点赞数 1

分类专栏： HTML5 文章标签： javascript 前端 html

于 2018-08-27 10:07:31 首次发布

本文链接：https://blog.youkuaiyun.com/CodingNoob/article/details/82108015

版权

HTML5 专栏收录该内容

27 篇文章

订阅专栏

这里写图片描述

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