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？ UPDATE 我不想为我的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";
    }
}

<强> Here is an Example

<小时/> 因为::-webkit-slider-thumb是伪元素，jQuery无法选择它，因此您只能选择有限的样式。

您可以选择使用jQuery：

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

然后使用CSS add：

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

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

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

Answer 2

CSS

.redslider::-webkit-slider-thumb {
    background-color: red;
}

的jQuery

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

为什么？

::-webkit-slider-thumb实际上不是选择器。这就像通过样式属性设置:active是不可能的。这使得我们必须在课堂上进行添加。你可以使用document.styleSheets，但这是模糊的，复杂的，并且对于像这样的简单任务来说是过度的

style :: - webkit-slider-thumb with jquery

2 个答案:

CSS

的jQuery

为什么？