如何通过javascript更改css伪元素？

Question

我的网页随机生成一种颜色，一些元素（如输入）通过javascript获取边框生成的颜色。像这样：

document.getElementById('input').style.color = color;

问题是我想要<input type="range" />的拇指来获取随机颜色并且我不知道该怎么做，尝试搜索网络而没有找到解决方案来获得这种css样式{{1在javascript中。

有人能帮帮我吗？ 提前谢谢。

Answer 1

更改伪元素样式的最简单方法是在JavaScript或JQuery中添加和删除类。这是一个例子：

<强> CSS：

.newClass::-webkit-slider-thumb{
    color:red;
}

JS解决方案：

添加课程：

document.getElementById("selector").classList.add('newClass');

删除课程：

document.getElementById("selector").classList.remove('newClass');

JQuery解决方案：

添加课程：

$("#selector").addClass("newClass");

删除课程：

$("#selector").removeClass("newClass");

Answer 2

好吧我终于做到了，我不知道我做的是好编程但是无论如何它都有效，我需要添加一个css规则，所以这样做：

document.styleSheets[0].insertRule('input[type=range]::-webkit-slider-thumb 
{ background-color:' + color + ' !important; }', 0);

我能够最终操纵伪元素（至少在chrome中，下一步是其他主流浏览器）。 无论如何，我认为这对想要尝试这样的事情的人有帮助，我需要搜索并尝试很多事情来做到这一点。

感谢所有试图帮助我的人。