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