更改输入颜色元素类型的属性答案

【问题标题】：Change properties of input color element type更改输入颜色元素类型的属性
【发布时间】：2020-07-18 21:44:13
【问题描述】：

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

.

【问题讨论】：

devblogs.microsoft.com/oldnewthing/20151013-00/?p=91371
这能回答你的问题吗？ How do you get the hue of a #xxxxxx colour?

【解决方案1】：

您可以使用“值”参数：

<input type="color" value="#fa0a00">

如果您有其他格式的颜色，则必须将其转换为十六进制。

【讨论】：

【解决方案2】：

将“LUM”设置为 120 的对应 HEX 颜色值为 #7F7F7F（因为您在这里使用的是 HSL 颜色，而不是 RGB。所以我们需要将其转换为 HSL）。

然后使用<input/>元素中的value属性来改变“礼节”。

示例：

<input type="color" value="#7F7F7F"/>

但“色调”会自动设置为160，R、G、B 设置为127。

【讨论】：

说 ""LUM" 到 120 是 #7F7F7F" 就像说 RGB "Blue is #FFFFFF" 这很奇怪，正如我已经指出的那样，Windows 颜色选择器中的亮度表示为 0 到 240 的包含范围。120 是 not 值的一半（就像你说的）#7f7f7f。 HSL 160, 0, 120 只是简单的 #808080 - 因为 saturation 在 0。

【解决方案3】：

这些参数通常称为HSL 颜色值。它们在 CSS 中用hsl(hue, saturation, lightness) 指定。

CSS 参数可以立即用作字符串来修改必要的颜色。

如果你想编辑背景，下面会帮助你：

document.getElementById('text').style.backgroundColor = "hsl(0, 0%, 100%)";

如果要设置字体颜色，请使用以下方法：

document.getElementById('text').style.color = "hsl(180, 50%, 50%)";

您可以根据需要更改样式属性。

希望有帮助！

【讨论】：

【解决方案4】：

使用here找到的HexToHSL和HSLToHex可以将颜色转换为HSL，设置亮度值，再转换回RGB设置表单控件的值。

在控件上，亮度从 0 到 240 变化。我们转换的颜色从 0 到 100 变化，所以在设置之前我们除以 240 并乘以 100。

document.getElementById("lumbutton").addEventListener("click", () => {
  var el = document.getElementById("colorsel");
  var color = el.value;
  var hsl = hexToHsl(color);
  var lum = parseInt(document.getElementById("lum").value);
  hsl[2] = lum * (100 / 240); // Change Luminance to typed value
  color = hslToHex(hsl);
  console.log(color);
  el.value = color;
});

function hexToHsl(H) {
  let r = 0, g = 0, b = 0;
  if (H.length == 4) {
    r = "0x" + H[1] + H[1]; g = "0x" + H[2] + H[2]; b = "0x" + H[3] + H[3];
  } else if (H.length == 7) {
    r = "0x" + H[1] + H[2]; g = "0x" + H[3] + H[4]; b = "0x" + H[5] + H[6];
  }
  r /= 255; g /= 255; b /= 255;
  let cmin = Math.min(r, g, b),
    cmax = Math.max(r, g, b),
    delta = cmax - cmin,
    h = 0, s = 0, l = 0;

  if (delta == 0) h = 0;
  else if (cmax == r) h = ((g - b) / delta) % 6;
  else if (cmax == g) h = (b - r) / delta + 2;
  else h = (r - g) / delta + 4;

  h = Math.round(h * 60);

  if (h < 0) h += 360;

  l = (cmax + cmin) / 2;
  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
  s = +(s * 100).toFixed(1);
  l = +(l * 100).toFixed(1);

  return [h, s, l];
}

var hslToHex = function(hsl) {
  var h = hsl[0], s = hsl[1], l = hsl[2];

  s /= 100;
  l /= 100;

  let c = (1 - Math.abs(2 * l - 1)) * s,
      x = c * (1 - Math.abs((h / 60) % 2 - 1)),
      m = l - c/2,
      r = 0, g = 0, b = 0;

  if (0 <= h && h < 60) { r = c; g = x; b = 0; } 
  else if (60 <= h && h < 120) { r = x; g = c; b = 0; } 
  else if (120 <= h && h < 180) { r = 0; g = c; b = x; }
  else if (180 <= h && h < 240) { r = 0; g = x; b = c; } 
  else if (240 <= h && h < 300) { r = x; g = 0; b = c; } 
  else if (300 <= h && h < 360) { r = c; g = 0; b = x; }
  
  // Having obtained RGB, convert channels to hex
  r = Math.round((r + m) * 255).toString(16);
  g = Math.round((g + m) * 255).toString(16);
  b = Math.round((b + m) * 255).toString(16);

  // Prepend 0s, if necessary
  if (r.length == 1) r = "0" + r;
  if (g.length == 1) g = "0" + g;
  if (b.length == 1) b = "0" + b;

  return "#" + r + g + b;
}

<input id="colorsel" type="color" value="#f08871"/>
<input id="lum" value="120">
<input id="lumbutton" type=button value="Set Luminosity value">

【讨论】：

【解决方案5】：

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

色相 0 - 239
饱和度 0 - 240
亮度 0 - 240

为简单起见，使用内存中的画布从 hsl() 颜色单元获取相应的 RGBA 值。
比从像素数据中提取 R、G、B - 只需将每个 0-255 范围转换为 .toString(16) 即可获得 HEX 值：

// 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 Lum 值。

【讨论】：