使用 JavaScript 更改范围输入样式答案

【问题标题】：Changing range input styling with JavaScript使用 JavaScript 更改范围输入样式
【发布时间】：2018-06-04 15:45:48
【问题描述】：

您可以使用 ::-webkit-slider-thumb、::-moz-range-thumb 和 ::-ms-thumb 选择器更改 HTML5 滑块的“拇指”（旋钮）的 CSS 样式。

您可以使用::-webkit-slider-runnable-track、::-moz-range-track 和::-ms-track 选择器更改 HTML5 滑块的“轨道”（凹槽）的 CSS 样式。

但是如果我想通过 JavaScript 改变“拇指”或“轨道”的样式怎么办？

这可能吗？如果这是可能的，我该怎么做？

【问题讨论】：

how to call range::-webkit-slider-runnable-track?的可能重复
（经过反思，这可能不是一个理想的副本，因为问题已经包含了您需要的答案。基本上不是尝试直接在 js 中访问阴影元素，而是将 <style> 节点附加到文档包含修改它们的css规则）
@DanielBeck：不确定我想要那个。我宁愿使用 Lea Verou 的技术，使用 CSS 变量更改这些值...如 here...
这很聪明；我以前没见过这种技术。

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

【解决方案1】：

正如您所发现的，这可以通过自定义属性来完成，并且假设浏览器兼容性不是问题（我不知道是否有任何浏览器，特别是 Edge 和 Safari，在伪属性上存在自定义属性问题）元素，但值得一试），自定义属性是使用 JavaScript 自定义伪元素样式的理想方式，作为 CSSOM 目前仅支持读取伪元素样式但不支持编写它们的一种解决方法。

如果您担心浏览器的兼容性，则必须按照here 所述的老式方式进行操作：

不过，您总是可以找到其他解决方法，例如：

将样式应用于一个或多个任意类的伪元素，然后在类之间切换（参见seucolega's answer 的快速示例）——这是惯用的方式，因为它使用简单的选择器（伪元素不是）区分元素和元素状态，它们的使用方式

通过更改文档样式表来操纵应用于所述伪元素的样式，这更像是一种黑客攻击

...同一个问题的其他答案给出了更多示例。

【讨论】：