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

原创已于 2023-04-18 10:02:44 修改 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

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

HTML5 专栏收录该内容

27 篇文章

订阅专栏

此博客涉及前端领域，重点围绕HTML和JavaScript展开，虽未给出具体内容，但可知与前端开发技术相关，HTML用于构建网页结构，JavaScript为网页增添交互性等功能。

这里写图片描述

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

关注博主即可阅读全文