使用jQuery或CSS选择器更改Webkit CSS

Question

使用jQuery或CSS选择器更改Webkit CSS

jquerycsswebkitcss-selectorspseudo-element

7

我能用jQuery控制自定义webkit滚动条的外观吗？我很好奇因为我想在悬停在::-webkit-scrollbar-thumb上时更改::-webkit-scrollbar-track-piece的背景颜色。也许有一种使用CSS来做这件事的方式。我对任何解决方案都持开放态度！谢谢！

- 1252748

@j08691 css，我尝试过像这样的代码 ::-webkit-scrollbar-thumb:hover + ::-webkit-scrollbar-track-piece { background-color:#3f0; }。现在我正在尝试使用 jQuery 对其进行排序或处理，类似于这样的代码 $(document).ready(function(){ $("body ::-webkit-scrollbar-track-piece").css({ "backgroundColor": "#3f0" }); });。 - 1252748

我认为jQuery不能处理特定于浏览器的选择器，请在[jsFiddle]（http://jsfiddle.net/）上尝试将其设置在单独的样式表中。 - Manuel Leuenberger

@maenu 是的，我已经做过了，但它就是不起作用。开始觉得这更麻烦而不值得！谢谢 - 1252748

问题在于，jQuery无法选择未在DOM中表示的元素，例如伪元素:before或webkit滚动条。请参见有效的jQuery选择器。 - Manuel Leuenberger

@maenu，你知道为什么我不能这样做吗 ::-webkit-scrollbar-thumb:before{ bacground-color:#f00; }？ - 1252748

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robin Winslow · Accepted Answer

我不认为有一种 jQuery 的方法可以做到这一点，但在原生的JavaScript中，你可以直接操纵样式表对象上的规则：

document.styleSheets[2].addRule("::-webkit-scrollbar", "width: 300px;");

这很好用。你也可以删除规则和更改规则：http://www.javascriptkit.com/domref/stylesheet.shtml

您可以给您的<style>块添加一个title，这将使它在styleSheets数组中易于查找。例如：

for(var i = 0; i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];
    if(sheet.title == 'scrollbar') {
        for(var j = 0; j < sheet.rules.length; j++) {
            var rule = sheet.rules[j];
            if(rule.cssText.match("webkit-scrollbar")) {
                rule.style.backgroundColor="yellow";
            }
        }
    }
}

http://jsfiddle.net/nottrobin/hSEzY/1/