javascript - 更改输入颜色元素类型的属性

Question

我想更改 <input type="color"/> 的一个属性
我尝试通过 javascript 执行此操作，但目前我找不到更改属性的方法/属性，该属性在下图中用红色圆圈标记，例如将值设置为 120。

.

Answer 1

由于<input type="color">接受 十六进制值 (即:#ffffff)，
创建一个接受 Windows HSL 颜色范围的函数

色相 0 - 239

饱和度 0 - 240

亮度 0 - 240

为简单起见， 使用内存中的 Canvas 从 hsl() 获取相应的 RGBA 值颜色单位。
比从像素数据中提取 R、G、B - 只需将每个 0-255 范围转换为 .toString(16)获得一个十六进制值:

// Convert Windows Color Picker HSLu 239,240,240 to HEX
function winHSL2HEX(H, S, L) {
  const X = n => (n).toString(16).padStart(2,'0');
  const ctx = document.createElement('canvas').getContext('2d');
  const HSL = `hsl(${~~(H/239*360)},${~~(S/240*100)}%,${~~(L/240*100)}%)`;
  ctx.fillStyle = HSL; ctx.fillRect(0,0,1,1);
  const d = [...ctx.getImageData(0,0,1,1).data];
  return "#"+ X(d[0]) + X(d[1]) + X(d[2]);
}

// Demo time
document.querySelector("#color_1").value = winHSL2HEX(160, 0, 120);
document.querySelector("#color_2").value = winHSL2HEX(67, 70, 120);
document.querySelector("#color_3").value = winHSL2HEX(239, 240, 120);

<input id="color_1" type="color">
<input id="color_2" type="color">
<input id="color_3" type="color">

现在您可以通过所需的 120亮度值。

https://stackoverflow.com/a/60689673/383904

https://devblogs.microsoft.com/oldnewthing/20151013-00/?p=91371

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API