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)时,它没有相同的输出。我想知道不工作的原因是不是因为我不能对代码使用相同的结构。我将向您展示我对不透明度范围输入做了什么:
[
结果:
发布于 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>
https://stackoverflow.com/questions/55602842
复制相似问题