Javascript 使用变量更改 webkit 样式

Question

总结

我正在处理一个输入[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%)';

支持代码

这是我的 'working' 代码中的这两行：

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%)';
    };
}

<style>
.slider {
  -webkit-appearance: none;
  height: 8px;
  border-radius: 4px;
  background-color: #efefef;
  border: 1px solid #b2b2b2;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #9CCF47;
  cursor: pointer;
}
</style>

<body>
<input type="range" min="1" max="5" value="0" class="slider" name="rangeInput">
</body>

是的，我知道这是一个小于最小值的值。我利用这一点从本质上将其更改为一项要求（想想而不是 5 个单选按钮进行调查）。这也是我想从绿色拇指开始的原因：绿色意味着它还没有被触及。这是我的重点。

提前致谢。

Answer 1

我认为你不能像其他伪类那样写::-webkit-slider-thumb，作为内联样式。参见 this thread。

但是您可以使用 <style> 元素完成您的“破解”。为每个输入创建一个并添加一个唯一的选择器（例如 id 或 [name="rangeInput1"）。

var range_els = document.querySelectorAll('input[type=range]');
range_els.forEach(range_el => {
  let s = document.createElement("style");
  document.head.appendChild(s);
  range_el.addEventListener("input", () => {
    const slider_value = range_el.value;
    let thumb_color;
    if (slider_value == 0) {
      thumb_color = "#9CCF47";
    } else {
      thumb_color = "#006CBA";
    }
    s.textContent = `.slider#${range_el.id}::-webkit-slider-thumb { background-color: ${thumb_color} !important; } .slider#${range_el.id}:-moz-range-thumb {  ${thumb_color} !important; }`;
  });
  range_el.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%)';
  };
});

.slider {
  -webkit-appearance: none;
  height: 8px;
  border-radius: 4px;
  background-color: #efefef;
  border: 1px solid #b2b2b2;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #9CCF47;
  cursor: pointer;
}

<body>
  <input type="range" min="1" max="5" value="0" class="slider" name="rangeInput1" id="rangeInput1">
  <input type="range" min="1" max="5" value="0" class="slider" name="rangeInput2" id="rangeInput2">
</body>

Javascript 使用变量更改 webkit 样式

Javascript change webkit style with variables

html

javascript

css

webkit