时间戳

首页 > 解决方案 > 在没有 jQuery 的情况下更改滑块句柄颜色

javascript - 在没有 jQuery 的情况下更改滑块句柄颜色

问题描述

    .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() 后我该怎么做？

标签： javascripthtml

解决方案

没有直接修改伪选择器的简单方法。有一种相当复杂的方法可以在这里找到

如果您只有预定义的颜色数量，那么最好的方法是为您想要的所有不同颜色设置类，然后简单地更改元素的类。

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

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

推荐阅读