更改滑块手柄颜色没有jQuery [重复]

Question

这个问题在这里已有答案：

• Changing CSS pseudo-element styles via JavaScript 7个答案

    .slider::-webkit-slider-thumb
    {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #00AA00;
        cursor: pointer;
    }

    .slider::-moz-range-thumb
    {
        width: 25px;
        height: 25px;
        background: #00AA00;
        cursor: pointer;
    }

上面是滑块的CSS的一部分，其中定义了滑块手柄的属性。但是，我想在不使用jQuery的情况下更改上面的背景颜色。调用document.getElementById（）后如何执行此操作？

Answer 1

没有直接修改伪选择器的简单方法。 can be found here有一种相当复杂的方式

如果您只想使用预定义数量的颜色，最好的方法是为所需的所有不同颜色设置类，只需更改元素的类。

.slider::-webkit-slider-thumb
{
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #00AA00;
    cursor: pointer;
}

.slider::-moz-range-thumb
{
    width: 25px;
    height: 25px;
    background: #00AA00;
    cursor: pointer;
}

.slider.red::-webkit-slider-thumb,
.slider.red::-moz-range-thumb
{
    background: red;
}

.slider.blue::-webkit-slider-thumb,
.slider.blue::-moz-range-thumb
{
    background: blue;
}

然后为js：

document.querySelector('.slider').className = 'slider red';

如果您希望能够将其设置为任意颜色，请查看我提到的第一个链接。