如何在 JavaScript 中选择 html5 范围的伪元素答案

【问题标题】：How to select html5 range's pseudo-elements in JavaScript如何在 JavaScript 中选择 html5 范围的伪元素
【发布时间】：2016-07-23 17:13:54
【问题描述】：

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

我可以在我的 CSS 中设置 ::-webkit-slider-runnable-track 等元素的样式，但如果我想在某些事件（如按钮单击或其他）之后更改 ::-webkit-slider-runnable-track 的 background-color 怎么办？

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

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

我真正需要的是像

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

【问题讨论】：

查看此链接：css-tricks.com/…
您是想通过 JS 获取该类型的所有输入，然后在脚本中操作/交互这些输入，还是想通过 CSS 选择器选择它们？如果是后者，您到底想为元素设置什么样式？

标签： javascript css html css-selectors pseudo-element

【解决方案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>

【讨论】：