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

Question

我的网页随机生成一种颜色，一些元素(如输入)通过 javascript 获取生成的颜色作为边框等。像这样:

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

问题是我想要 <input type="range" /> 的拇指为了生成随机颜色，我不知道该怎么做，尝试并搜索了网络，但没有找到获得此 css 样式的解决方案 input[type=range]::-webkit-slider-thumb在 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");