Javascript使用变量更改webkit样式

摘要

我正在处理一个输入[type=range]，基本上看起来像Chrome的默认值，但在单击之前拇指是绿色的。这是最终目标。通过我的浏览器历史中深深埋藏的几个答案（因此缺乏对他们的信任），我能够让它以我想要的方式工作

问题

除了一个主要问题外，onLoad代码的工作方式是我希望的：它影响所有元素，而不是个人。我根本不知道如何获得这条线：

s.textContent = `.slider::-webkit-slider-thumb { background-color: ${thumb_color} !important; } .slider:-moz-range-thumb {  ${thumb_color} !important; }`;      

this.style.background = 'linear-gradient(to right, #006CBA 0%, #006CBA '+100*(this.value-1)/4 +'%, #efefef ' + 100*(this.value-1)/4 + '%, #efefef 100%)';

以与此行相同的方式设置：

s.textContent = `.slider::-webkit-slider-thumb { background-color: ${thumb_color} !important; } .slider:-moz-range-thumb {  ${thumb_color} !important; }`;      

this.style.background = 'linear-gradient(to right, #006CBA 0%, #006CBA '+100*(this.value-1)/4 +'%, #efefef ' + 100*(this.value-1)/4 + '%, #efefef 100%)';

支持代码

以下是我的“工作”代码中的两行：

let s = document.createElement("style");
document.head.appendChild(s);
var range_els = document.querySelectorAll('input[type=range]');
for(let i = 0;i < range_els.length; i++) {
    range_els[i].addEventListener("input", () => {
        const slider_value = range_els[i].value;
        let thumb_color;
        if (slider_value == 0) {
            thumb_color = "#9CCF47";
        }
        else {
            thumb_color = "#006CBA";
        }
        //effects the style, not the individual style.  :|
        s.textContent = `.slider::-webkit-slider-thumb { background-color: ${thumb_color} !important; } .slider:-moz-range-thumb {  ${thumb_color} !important; }`;            
    });
    range_els[i].oninput = function() {
        this.style.background = 'linear-gradient(to right, #006CBA 0%, #006CBA '+100*(this.value-1)/4 +'%, #efefef ' + 100*(this.value-1)/4 + '%, #efefef 100%)';
    };
}

let s=document.createElement（“样式”）；
文件。标题。附录子项；
var range_els=document.querySelectorAll（'input[type=range]'）；
for（设i=0；i{
常量滑块值=范围值[i]。值；
让大拇指沾上颜色；
如果（滑块_值==0）{
拇指颜色=“#9CCF47”；
}
否则{
拇指颜色=“#006CBA”；
}
//影响样式，而不是单个样式：|
s、 textContent=`.slider:：-webkit slider thumb{background color:${thumb\u color}！important；}。slider:-moz range thumb{${thumb\u color}！important；}；
});
范围[i].oninput=function（）{
this.style.background='线性渐变（向右，#006CBA 0%，#006CBA'+100*（this.value-1）/4+'%，#efefef'+100*（this.value-1）/4+'%，#efefef 100%）；
};
}

.滑块{
-webkit外观：无；
高度：8px；
边界半径：4px；
背景色：#EFEF；
边框：1px实心#b2b2b2；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
宽度：16px；
高度：16px；
边界半径：8px；
背景色：#9CCF47；
光标：指针；
}

是的，我知道这是一个小于最小值的值。我正在利用这个值，从本质上说，改变它是一项要求（想象一下，而不是调查中的5个单选按钮）。这也是我想从园艺大拇指开始的原因：绿色意味着它还没有被触摸过。这是我的重点

---

提前谢谢。

我认为您不能像其他伪类一样，以内联方式编写

：-webkit滑块thumb

。看

但是您可以使用

元素来完成“hack”。为每个输入创建一个选择器，并添加一个唯一的选择器（例如，

id

或

[name=“rangeInput1”

）

var range_els=document.querySelectorAll（'input[type=range]）；
范围\u el.forEach（范围=>{
设s=document.createElement（“样式”）；
文件。标题。附录子项；
范围添加列表器（“输入”，（）=>{
常量滑块值=范围值；
让大拇指沾上颜色；
如果（滑块_值==0）{
拇指颜色=“#9CCF47”；
}否则{
拇指颜色=“#006CBA”；
}
s、 textContent=`.slider{range{u el.id}:：-webkit slider thumb{background:${thumb\u color}！重要；}.slider{range{u el.id}:-moz range thumb{${thumb\u color}！重要；`；
});
range_el.oninput=函数（）{
this.style.background='线性渐变（向右，#006CBA 0%，#006CBA'+100*（this.value-1）/4+'%，#efefef'+100*（this.value-1）/4+'%，#efefef 100%）；
};
})；

滑块{
-webkit外观：无；
高度：8px；
边界半径：4px；
背景色：#EFEF；
边框：1px实心#b2b2b2；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
宽度：16px；
高度：16px；
边界半径：8px；
背景色：#9CCF47；
光标：指针；
}

简单的替代方案，只需付出最小的努力即可实现。感谢您的洞察力！旁注对于其他人，我将EventListener从“输入”更改为“单击”，这样，当所需的值为min（在我的示例中为1）时，颜色就会发生变化。只是更好的视觉反馈。