样式 ::-webkit-slider-thumb 与 jquery

Question

我有一些我想通过 jquery 设置样式的滑块 例如：

<input type="range"/>

要使用纯 css 设置样式，我会写：

input[type="range"]::-webkit-slider-thumb{
/* blah blah blah*/
background:red;
}

这是有效的。但是，如果我尝试这样做：

$("input[type='range']::-webkit-slider-thumb").css("background","red");

它不会给我一个错误，但它也不起作用。我已经看到了一些其他类似的问题。这些问题的答案是插入一个带有 jquery 和一些类的新样式标签（我不想做的事情）。有什么方法可以设置样式 ::-webkit-slider-thumb用jquery？更新我不想在我的 html 中注入任何新的样式标签或使用自定义类！！！

Answer 1

普通的 JavaScript 可以解决这个问题：

for(var j = 0; j < document.styleSheets[1].rules.length; j++) {
    var rule = document.styleSheets[1].rules[j];
    if(rule.cssText.match("webkit-slider-thumb")) {
        rule.style.backgroundColor="red";
    }
} 

这是一个例子

因为::-webkit-slider-thumb是伪元素jQuery 无法选择它，这让您可以选择有限的样式来设置它。

您可以选择使用 jQuery：

$("input[type='range']").addClass('slideThumb');

然后使用 CSS 添加：

.slideThumb::-webkit-slider-thumb {
   background: red;
}

但这相当于简单地将类直接添加到您的输入中：

<input class="slideThumb" type="range"/>