[英]change webkit css with jquery or css selector
Can I use jquery to control the look of custom webkit scrollbars ? 我可以使用jquery来控制自定义webkit滚动条的外观吗? I'm curious because I would like to change the background color of
::-webkit-scrollbar-track-piece
when I hover over ::-webkit-scrollbar-thumb
. 我很好奇,因为当我将鼠标悬停在
::-webkit-scrollbar-thumb
时,我想改变::-webkit-scrollbar-track-piece
的背景颜色。 Perhaps there is a way to do this with CSS. 也许有一种方法可以用CSS做到这一点。 I'm open to either solution!
我愿意接受任何解决方案! Thanks!
谢谢!
I don't think there's a jQuery way to do this, but in native JavaScript you can manipulate rules on the stylesheet objects directly: 我不认为有一种jQuery方法可以做到这一点,但在本机JavaScript中,您可以直接操作样式表对象上的规则:
document.styleSheets[2].addRule("::-webkit-scrollbar", "width: 300px;");
That works fine. 这很好。 You can also remove rules and change rules: http://www.javascriptkit.com/domref/stylesheet.shtml
您还可以删除规则并更改规则: http : //www.javascriptkit.com/domref/stylesheet.shtml
You could give your <style>
block a title
which would make it easy to find in the styleSheets
array. 你可以给你的
<style>
块一个title
,这样可以很容易地在styleSheets
数组中找到它。 Something like: 就像是:
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/ http://jsfiddle.net/nottrobin/hSEzY/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.