javascript - 如何在 JavaScript 中选择 html5 范围的伪元素

Question

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

我可以为 ::-webkit-slider-runnable-track 这样的元素设置样式在我的 css 中，但是如果我想更改 ::-webkit-slider-runnable-track 怎么办？的 background-color在某些事件(例如按钮点击或其他)之后？

这可能吗？浏览器支持目前没有意义。

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

我真正需要的是类似

document.getelementById('id').getPseudoElementSomehow('-webkit-slider-runnable-track').style = 'background: green'

Answer 1

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

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

.red {
  background-color: red;
}

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