javascript - 是否可以使用 jquery 选择带有 vendor 前缀的属性？

Question

我想更改 slider 的 Thumb 颜色，但我需要使用“.topcoat-range-input::-webkit-slider-thumb”选择 slider 。这个选择器不适用于 css，我认为是因为它包含一个 vendor 前缀。有没有可能解决这个问题？我想动态选择颜色，所以我不能简单地附加一个类。

$('.button').on('click', function (e) {
    $('.topcoat-range-input::-webkit-slider-thumb').css('background', 'rgba(255, 208, 255, 0.75)');
});

http://jsfiddle.net/qcn6tmpz/3/

一个可能的解决方案是这个，但我希望用简单的方法来做到这一点:

$('.button').on('click', function (e) {
    $("<style type='text/css'>.topcoat-range-input::-webkit-slider-thumb{background:rgba(255, 208, 255, 0.75)}</style>").appendTo($("head"));
});

Answer 1

您可以在点击时应用该类，并为选择器定义您的 CSS 规则。在这里更新了 fiddle 。 http://jsfiddle.net/qcn6tmpz/9/

$('.button').on('click', function (e) {
    $('.topcoat-range-input').addClass('applied');
});


.topcoat-range-input.applied::-webkit-slider-thumb {
    background : rgba(255, 208, 255, 0.75);
}