色相/饱和度/最亮范围滑块功能

Question

假-->

   <div id="colorSpec">
                HEX color: 
                 <!-- The user insert the color the div will have-->
                <input id="userColor" type="text"> <br>
                <input id="doitButton" type="button" value="Do it !"> <br>

                 <!-- Range slider to set the opacity-->
                <input id="mySlider"  type= "range" step=".01" min="0" max="1" value=".5">
            </div>

 doitButton.addEventListener("click", function(ev){ //alert("got a click!"); var textelement= document.getElementById('userColor'); var hcolor= textelement.value; console.log("hcolor is " + hcolor); //set the color took from the input "userColor colorBox.style.backgroundColor= hcolor; }); mySlider.addEventListener("input",function(ev){ //set the opacity colorBox.style.opacity=mySlider.value; }) }

我正在使用范围输入来修改 div 的背景颜色。 我正在使用 javascript 函数来执行此操作，并且我已经使用 div 的不透明度进行了操作，但是当我尝试使用饱和度、色调和最亮 (hsl) 时，它没有相同的输出。 我想知道为什么不起作用的原因是因为我不能对代码使用相同的结构。 我将向您展示我对不透明度范围输入所做的工作：

[ 结果：

Answer 1

只需将 HSL 值设置为字符串。 除此之外，应该注意的是，在 DOM 中，这似乎总是被转换回rgb()或rgba() 。 即使根据规范手动设置样式属性字符串。

如果该值是半透明的，则计算出的值将是rgba()对应的值。 如果不是，它将是rgb()对应的一个。 透明关键字映射到rgba(0,0,0,0) 。

 update = () => { let hsl = `hsl(${mySlider1.value||0}, ${mySlider2.value||0}%,${mySlider3.value||0}%)`; colorBox.style.backgroundColor = hsl; }; mySlider1.addEventListener("input", update); mySlider2.addEventListener("input", update); mySlider3.addEventListener("input", update); update();

 #colorBox { width: 100px; height: 100px; }

 <div id="colorSpec"> <!-- Range slider to set the opacity--> <input id="mySlider1" type="range" step="1" min="0" max="260" value="180"> <input id="mySlider2" type="range" step="1" min="0" max="100" value="50"> <input id="mySlider3" type="range" step="1" min="0" max="100" value="50"> </div> <div id="colorBox"></div>