如何仅使用 javascript 设置输入[范围]的拇指样式？

Question

所以我有一个范围/滑块<input type="range">，我有一些 css 使它看起来像这样： 我希望拇指在滑动时改变颜色，我得到了 JS，我可以根据它的值 1-100 获取颜色，但是我不知道如何访问该范围的拇指。无论我在哪里看，我都可以通过 CSS 访问拇指，但在 JS 上却无法访问。

我的尝试类似于：

slider.thumb //undefined

slider.shadowRoot //null

slider.style.webkitSliderThumb // undefined

slider.style.thumb // undefined

slider.childNodes  // []

slider.children // []

Answer 1

最好的方法是使用CSS Variables将颜色传递给伪选择器。我在下面整理了一个非常简单的例子：const input = document.querySelector( 'input' );input.addEventListener( 'input', event => {&nbsp; &nbsp;&nbsp; &nbsp;// This assigns the strength of the color to a CSS variable, which will in turn style the slider.&nbsp; &nbsp;input.style.setProperty( '--color', `rgba(${input.value},0,0,1)`);&nbsp;&nbsp;}):root {&nbsp; --color: rgba(0,0,0,1);}input[type=range] {&nbsp; width: 100%;&nbsp; height: 1em;&nbsp; appearance: none;&nbsp; -webkit-appearance: none;&nbsp; background: linear-gradient( 90deg, black, red );}input[type=range]::-webkit-slider-thumb {&nbsp; background: var(--color, white);&nbsp; appearance: none;&nbsp; -webkit-appearance: none;&nbsp; width: 20px;&nbsp; height: 20px;&nbsp; border-radius: 20px;&nbsp; border: 1px solid white;}<input type="range" value="1" min="0" max="255" step="1" />这里的优雅之处在于它也与所有旧浏览器很好地兼容，因为您可以为那些懒得使用现代浏览器的人定义默认的白色。不，JS 中无法访问伪元素，因为它们……技术上不存在。