使用 jquery 或 css 选择器更改 webkit css答案

【问题标题】：change webkit css with jquery or css selector使用 jquery 或 css 选择器更改 webkit css
【发布时间】：2012-09-04 16:15:47
【问题描述】：

我可以使用jquery来控制custom webkit scrollbars的外观吗？我很好奇，因为当我将鼠标悬停在::-webkit-scrollbar-thumb 上时，我想更改::-webkit-scrollbar-track-piece 的背景颜色。也许有办法用 CSS 做到这一点。我对任何一种解决方案都持开放态度！谢谢！

【问题讨论】：

@j08691 css，我已经尝试过使用 jquery 像 ::-webkit-scrollbar-thumb:hover + ::-webkit-scrollbar-track-piece { background-color:#3f0; } 我正在尝试排序或解决类似 $(document).ready(function(){ $("body ::-webkit-scrollbar-track-piece").css({ "backgroundColor": "#3f0" }); }); 的问题
我不认为 jQuery 处理特定于浏览器的选择器，创建一个 jsFiddle 并尝试在单独的样式表中设置它。
@maenu 是的，我已经做到了，只是没有用。开始认为这比它的价值更麻烦！不过谢谢
问题是，jQuery 不能选择 DOM 中没有表示的元素，例如伪元素 :before 或 webkit 滚动条。见valid jQuery selectors。
@maenu 你知道我为什么不能这样做吗::-webkit-scrollbar-thumb:before{ bacground-color:#f00; }

标签： jquery css webkit css-selectors pseudo-element

【解决方案1】：

我不认为有 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/

【讨论】：

我确实给了我的样式表一个标题：<link rel="stylesheet" title="scroll_main" type="text/css" href="styles/scroll_main.css?<?=time()?>" /> 但脚本在第二行似乎失败了。它不认识它。我应该给它一个标题吗？谢谢！
这很酷。真的很高兴知道其实谢谢你。不幸的是，由于 jquery 无法跟踪滚动条上的悬停事件，因此无法将 ::-webkit-scrollbar-track-piece 样式更改附加到 ::-webkit-scrollbar-thumb onHover :( 虽然这仍然非常酷。