Question

是否可以使用JS选择<input type="range">伪元素？

我可以在我的css中设置::-webkit-slider-runnable-track等元素的样式，但是如果我想在某个事件之后更改::-webkit-slider-runnable-track的{{1}}（如按钮点击或其他什么），该怎么办？

有可能吗？浏览器支持暂时没有意义。

UPD ：问题是如何通过JS设置范围的伪元素的样式。假设我需要动态更改范围的轨道颜色。我不能只用background-color设置样式。

我真正需要的是像

css

Answer 1

据我所知，你不能用Javascript直接选择伪元素。唯一的解决方案是使用CSSStyleSheet.insertRule()在预期事件上添加css规则。

＆＃13;

var button = document.querySelector('button');
button.onclick = function() {
  document.styleSheets[0].insertRule('input[type=range]::-webkit-slider-runnable-track { background-color: red; }', 0);
};

＆＃13;

.red {
  background-color: red;
}

＆＃13;

<input type="range">
<button>click me</button>

＆＃13;

如何在JavaScript中选择html5 range的伪元素

1 个答案: