时间戳

首页 > 解决方案 > 如何动态更改跨度标签的颜色？

javascript - 如何动态更改跨度标签的颜色？

问题描述

我正在尝试构建一个滑块。Slider 的范围在 0 到 30 之间，每次跳跃 10 步，因此：0、10、20、30。在这 4 个级别中的每一个级别上，我都放置了一个空圆圈。目前，每当我单击滑块上的某个级别时，滑块的相关部分都会以预期的颜色绘制。例如，点击 10 级，意味着滑块以 0-10 的给定颜色绘制。我现在要做的是，让单击级别内的圆圈也具有相同的颜色，例如我单击级别 10，并让放置在 0 和 10 的圆圈也具有相同的颜色。我有以下代码，到目前为止我一直在处理：

function sliderVal(range){

    var nodes=document.getElementsByClassName("dot");
    for (let i=0;i<nodes.length;i++){
        nodes[i].style.backgroundColor = "#DADDe3";                      
    }
    for (let i=0;i<range;i++){
        console.log(nodes[i].id)
        nodes[i].style.backgroundColor = "#84b7e3";         
    }

}
input[type=range] {
  width: 100%;
  margin: 3.9px 0;
}

input[type="range"]:focus {
  outline: none;  
  }
 input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
    border-radius: 11px;
    height: 11px;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.15, #84b7e3),
        color-stop(0.15, #DADDe3)
    );
}


input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    /*background-color: #E9E9E9;*/
    /*border: 1px solid #CECECE;**/

  box-shadow: 0px 0px 0.5px #000000, 0px 0.6px 1px #0d0d0d;
  border: 0px solid #000000;
  width: 20.035px;
  border-radius: 50px;
  background: #3072ac;
  cursor: pointer;
  margin-top: 0px;  
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
  background: #DADDe3;
  border-radius: 1.3px;
  border: 0px solid #010101;
}
input[type="range"]::-moz-range-progress {
  height: 11px;
  background-color: #84b7e3; 
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 18px;
  width: 18px;
  border-radius: 50px;
  background: #3072ac;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #6fabde;
  border: 0px solid #010101;
  border-radius: 2.6px;
  box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
  background: #84b7e3;
  border: 0px solid #010101;
  border-radius: 2.6px;
  box-shadow: 0.2px 0.2px 0px rgba(0, 0, 0, 0), 0px 0px 0.2px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0.5px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 18px;
  width: 18px;
  border-radius: 50px;
  background: #3072ac;
  cursor: pointer;
  height: 11px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #84b7e3;
}
input[type=range]:focus::-ms-fill-upper {
  background: #99c3e8;
}

.dot {
  height: 20px;
  width: 20px;
  background-color: #DADDe3;
  border-radius: 50%;
  display: inline-block;
}

#slider1{
    position:absolute;
    top: 77%;
    left: 0%;
}

#slider2{
    position:absolute;
    top: 77%;
    left: 10%;
}

#slider3{
    position:absolute;
    top: 77%;
    left: 20%;
}
#slider3{
    position:absolute;
    top: 77%;
    left: 30%;
}
<div  class="slidecontainer" style="position: relative">
<input style="position: absolute" type="range" min="0" max="30" value="0" step="10" class="slider" id="myRange" onClick="sliderVal('value/10')">

<span class="dot" id="slider1" ></span>
<span class="dot" id="slider2" ></span>
<span class="dot" id="slider3"></span>
<span class="dot" id="slider4" ></span>
</div>

不幸的是，我在 js 文件中的 clicklistener 没有完成它的工作，并且圆圈没有改变它们的颜色。如您所见，为了创建圆圈，我使用了一个空的 span 标签。我对 HTML/Javascript 完全陌生，并且感觉我可以/应该使用 span 标签以外的东西来满足我的需求。有没有办法通过修改上面的代码让这些span标签改变它们的背景颜色？还是我应该为此目的使用其他东西（可能是圆形图标或其他东西）？我知道这不是一个原始问题。但是我在Change color of span tag based on value以及https://www.w3schools.com/js/js_htmldom_css.asp上的 w3schools 中找到的类似问题的答案到目前为止并没有真正的帮助。有什么建议么？

标签： javascripthtmlcss

解决方案

因此，您需要更改 onClick 以onchange注意所有小写字母，这是事件处理程序的 html 属性名称，然后将值传递给函数，this.value这样您最终会得到：

<div  class="slidecontainer" style="position: relative">
    <input style="position: absolute" type="range" min="0" max="30" value="0" step="10" class="slider" id="myRange" onchange="sliderVal(this.value/10)">

    <span class="dot" id="slider1" ></span>
    <span class="dot" id="slider2" ></span>
    <span class="dot" id="slider3"></span>
    <span class="dot" id="slider4" ></span>
</div>

和js

function sliderVal(range){
    var nodes=document.getElementsByClassName("dot");
    for (let i=0;i<nodes.length;i++){
        nodes[i].style.backgroundColor = "#DADDe3";                      
    }
    for (let i=0;i<range;i++){
        console.log(nodes[i].id)
        nodes[i].style.backgroundColor = "#84b7e3";         
    }

}

工作演示

推荐阅读