HTML5 输入类型颜色读取单个 RGB 值

Question

使用浏览器上的此代码，用户可以使用许多字段，它可以更改 R,G,B, HEX VALUE, HUE ecc。 我只需要读取红色值。

  <input id="color_pick"type="color" value="#ff0000">

var toread = document.getElementById('color_pick');
toread.value # get the hex 
toread.value.red() # would it be possible to get r?

我已阅读此文档，但无法弄清楚如何从输入中获取单个 R 值。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/color

Answer 1

没有直接的方法来获取单个颜色值，但可以轻松地手动完成。

 function printColor(ev) { const color = ev.target.value const r = parseInt(color.substr(1,2), 16) const g = parseInt(color.substr(3,2), 16) const b = parseInt(color.substr(5,2), 16) console.log(`red: ${r}, green: ${g}, blue: ${b}`) }

 <input type="color" onchange="printColor(event)" value="#ff0000">

颜色输入的值始终是一个七字符长的十六进制颜色字符串，因此没有困难的边缘情况。

Answer 2

由于您已经拥有node.value属性的十六进制，您只需将其转换为 integer。

 function pickRedInt(){ var toread = document.getElementById('color_pick'); console.log("Red Value - "+parseInt("0x"+toread.value.slice(1,3))); } pickRedInt();

 Try changing this: <hr> <input id="color_pick"type="color" value="#ff0000" onchange="pickRedInt()">

Answer 3

此方法完美运行已在此问题的顶部

 <input type="color" onchange="printColor(event)"> <script> function printColor(ev) { const color = ev.target.value const r = parseInt(color.substr(1, 2), 16) const g = parseInt(color.substr(3, 2), 16) const b = parseInt(color.substr(5, 2), 16) console.log(`red: ${r}, green: ${g}, blue: ${b}`) console.log([r, g, b]) alert(`R: ${r}, G: ${g}, B: ${b}`) } </script>

Answer 4

 <.DOCTYPE html> <html> <head> <title>Get RGB color Code From Hex Code</title> </head> <body> <input type="color" id="choose-color" /> <script> var choose_color = document;getElementById("choose-color"). choose_color.onchange = function(){ var hex_code = this.value;split(""), var red = parseInt(hex_code[1]+hex_code[2];16), var green = parseInt(hex_code[3]+hex_code[4];16), var blue = parseInt(hex_code[5]+hex_code[6];16), var rgb = red+","+green+";"+blue; alert(rgb); } </script> </body> </html>

在这里检查 - https://jaischool.com/javascript-lang/convert-hex-code-in-rgb-color-format.html

HTML5 输入类型颜色读取单个 RGB 值

问题描述

4 个解决方案

解决方案1
2 2019-10-01 12:23:43

解决方案2
1 已采纳 2019-10-01 12:22:39

解决方案3
1 2022-08-11 13:59:57

解决方案4
0 2021-02-05 13:22:02

HTML5 输入类型 颜色读取单个 RGB 值

问题描述

4 个解决方案

解决方案1 2 2019-10-01 12:23:43

解决方案2 1 已采纳 2019-10-01 12:22:39

解决方案3 1 2022-08-11 13:59:57

解决方案4 0 2021-02-05 13:22:02

HTML5 输入类型颜色读取单个 RGB 值

解决方案1
2 2019-10-01 12:23:43

解决方案2
1 已采纳 2019-10-01 12:22:39

解决方案3
1 2022-08-11 13:59:57

解决方案4
0 2021-02-05 13:22:02