色调/饱和度/最亮范围滑块的函数
色调/饱和度/最亮范围滑块的函数
提问于 2019-04-10 07:53:18
false -->
<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)时，它没有相同的输出。我想知道不工作的原因是不是因为我不能对代码使用相同的结构。我将向您展示我对不透明度范围输入做了什么：
[
结果：
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-10 08:43:12
除此之外，应该注意的是，在DOM中，它似乎总是被转换回rgb()或rgba()。
如果该值是半透明的，则计算得到的值将是
rgba()对应的值。如果不是，它将是对应的rgb()。transparent关键字映射为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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55602842
复制相关文章
相似问题
腾讯云开发者
