我想更改一個屬性，<input type="color"/> 我嘗試通過 javascript 執行此操作，但目前我找不到更改該屬性的方法/屬性，該屬性在下圖中用紅色圓圈標記，例如將值設置為 120 。
5 回答
撒科打諢
TA貢獻1934條經驗 獲得超2個贊
由于<input type="color">接受十六進制值（即#ffffff：），
因此創建一個接受 Windows HSL 顏色范圍的函數
色調 0 - 239
飽和度 0 - 240
亮度 0 - 240
為簡單起見，使用內存畫布從顏色單元獲取相應的 RGBA 值hsl()。
與從像素數據中提取 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">
現在您可以傳遞所需的120Lum 值。
翻過高山走不出你
TA貢獻1875條經驗 獲得超3個贊
這些參數通常稱為HSL顏色值。hsl(hue, saturation, lightness)它們在 CSS 中指定。
CSS 參數可以立即用作字符串來修改必要的顏色。
如果您想編輯背景，以下內容可以幫助您：
document.getElementById('text').style.backgroundColor = "hsl(0, 0%, 100%)";如果要設置字體顏色，請使用以下方法：
document.getElementById('text').style.color = "hsl(180, 50%, 50%)";您可以根據需要更改樣式屬性。
希望有幫助！
慕的地10843
TA貢獻1785條經驗 獲得超8個贊
HexToHSL可以將顏色轉換為 HSL，設置亮度值，然后轉換回 RGB 以設置表單控件的值。HSLToHex
在控件上，亮度從 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">
慕姐4208626
TA貢獻1852條經驗 獲得超7個贊
將“LUM”設置為 120 的相應十六進制顏色值為#7F7F7F（因為您在這里使用的是 HSL 顏色，而不是 RGB。所以我們需要將其轉換為 HSL）。
然后使用元素value中的屬性<input/>來更改“屬性”。
例子：
<input type="color" value="#7F7F7F"/>
但“色調”會自動設置為160，R、G 和 B 會自動設置為127。
- 5 回答
- 0 關注
- 200 瀏覽
添加回答
舉報
/150
提交
取消