Question

    .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';

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

在没有jQuery的情况下更改滑块手柄颜色

1 个答案: