Question

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

。

Answer 1

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

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

为简单起见，使用内存画布从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 Lum值。

Answer 2

您可以使用'value'参数：

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

如果您使用其他格式的颜色，则必须将其隐藏为十六进制。

Answer 3

将“ LUM”设置为120的相应十六进制颜色值为#7F7F7F（因为此处使用的是HSL颜色而不是RGB，因此我们需要将其转换为HSL）。

然后使用value元素中的<input/>属性更改“属性”。

示例：

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

但是“色相”将自动设置为160，R，G和B设置为127。

Answer 4

这些参数通常称为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%)";

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

希望有帮助！

Answer 5

使用here中找到的HexToHSL和HSLToHex，您可以将颜色转换为HSL，设置亮度值，然后转换回RGB以设置表单控件的值。 / p>

在控件上，亮度从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 个答案: