首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >色调/饱和度/最亮范围滑块的函数

色调/饱和度/最亮范围滑块的函数
EN

Stack Overflow用户
提问于 2019-04-10 07:53:18
回答 1查看 549关注 0票数 1

false -->

代码语言:javascript
复制
   <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>

代码语言:javascript
复制
   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)时,它没有相同的输出。我想知道不工作的原因是不是因为我不能对代码使用相同的结构。我将向您展示我对不透明度范围输入做了什么:

[

结果:

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-10 08:43:12

除此之外,应该注意的是,在DOM中,它似乎总是被转换回rgb()rgba()

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

代码语言:javascript
复制
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();
代码语言:javascript
复制
#colorBox {
  width: 100px;
  height: 100px;
}
代码语言:javascript
复制
<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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55602842

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档