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

Question

我正在尝试构建一个 slider 。 slider 的范围在 0 到 30 之间，每次跳跃 10 步，因此:0、10、20、30。在这 4 个级别中的每一个级别，我都放置了一个空圆圈。目前，每当我点击 slider 上的一个级别时， slider 的相关部分就会以预期的颜色绘制。例如，点击级别 10，意味着 slider 被绘制为 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 depending on value 找到的类似问题的答案还有 w3schools https://www.w3schools.com/js/js_htmldom_css.asp到目前为止并没有真正帮助。有什么建议吗？

Answer 1

因此您需要将 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";         
    }

}

Working DEMO