javascript - 色调/饱和度/最亮范围 slider 的功能

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()。即使根据 spec 手动设置样式属性字符串.

If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to 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>