Javascript 如何在JS/JQuery中选择class:：-webkit

我需要选择一个名为.slider:：-webkit slider thumb的css类来更改属性。我尝试了多种选项，但JS似乎没有选择它

document.addEventListener("DOMContentLoaded", function (event) {
 var slider = document.getElementById("importanceSlider");
 var knob = document.getElementsByClassName(".slider::-webkit-slider-thumb");

 knob.style.background = "#ffffff"; });

CSS:

HTML:

我想更改.slider:：-webkit slider thumb的宽度值，具体取决于滑块的值

---

任何帮助都将不胜感激首先，您应该知道伪选择器是非标准的

不要在面向Web的生产站点上使用它：它不会适用于所有用户。实现之间也可能存在很大的不兼容性，并且行为可能会在将来发生变化

…所以使用它时要小心

如果您在兼容浏览器中使用它，则还有一个问题：

您似乎混淆了

querySelector

和

getElementsByClassName

。前者允许您使用CSS选择器获取元素，后者则不允许。另外，后者返回一个节点列表

此外，您应该考虑使用样式表，而不是这样命名您的类

以下是一些解决方案：

1）

querySelector

var旋钮=document.querySelector（“.slider”）；
旋钮。类列表。添加（'blue'）
.slider:：-webkit滑块thumb{}
.blue{背景色：blue；}
Carrot
我怀疑这可能不可能，因为拇指不像大多数伪元素那样位于DOM中。也许这会对您有所帮助：谢谢您详细的回答，但是我的问题尚未解决。也许我应该更准确一点。我想根据其值更改滑块的旋钮，虽然您的回答确实帮助我调整滑块，但单独更改旋钮不起作用。我更新了我的问题以获得更多许可。
.slidercontainer{
    width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px; 
background: #e9ecef;
outline: none;
border-radius: 50px;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10%;
height: 25px; 
background: #dc3545;
border-radius: 50px;
}

<div class="slidecontainer">
     <input type="range" min="0" max="10" value="5" 
    class="slider" id="importanceSlider" name="importance">
</div>