如何 select html5 范围 JavaScript 中的伪元素

Question

JS可以select <input type="range">伪元素吗？

我可以在我的 css 中设置 ::-webkit-slider-runnable-track 等元素的样式，但是如果我想在某些事件（例如按钮单击或随便）？

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

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

设置样式

我真正需要的是

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

Answer 1

据我所知，你不能直接用Javascript来select伪元素。唯一的解决方案是在 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>

如何 select html5 范围 JavaScript 中的伪元素

How to select html5 range's pseudo-elements in JavaScript

html

javascript

css

css-selectors

pseudo-element