是否可以使用jQuery选择像滚动条这样的伪元素？

Question

是否可以选择这样的伪元素：

::-webkit-scrollbar
::-webkit-scrollbar-track
::-webkit-scrollbar-thumb

通过jQuery？

 #scroller { background: #fff; height: 300px; width: 400px; overflow: hidden; overflow-y: scroll; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="scroller"> <p> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. </p> </div>

Answer 1

您可以“读取”伪元素的值，但是您不能更改它们，或者我已经找到了。

尝试设置属性值会返回错误：

无法在“CSSStyleDeclaration”上执行“setProperty”：这些样式是计算出来的，因此“width”属性是只读的。

 var width = window.getComputedStyle( document.querySelector('#scroller'), '::-webkit-scrollbar').getPropertyValue('width'); console.log('::-webkit-scrollbar width> ' + width); $(document).on('click', function() { // window.getComputedStyle(document.querySelector('.element'), '::-webkit-scrollbar').setProperty('width', '8px'); // returns "Failed to execute 'setProperty' on 'CSSStyleDeclaration': These styles are computed, and therefore the 'width' property is read-only." });

 #scroller { width: 300px; height: 300px; overflow-y: scroll; background: #eee; } #scroller::-webkit-scrollbar { width: 10px !important; } /* Track */ #scroller::-webkit-scrollbar-track { background: #eee !important; } /* Handle */ #scroller::-webkit-scrollbar-thumb { background: #555 !important; } /* Handle on hover */ #scroller::-webkit-scrollbar-thumb:hover { background: #777 !important; } #scroller p { height: 800px; width: 100%; background: #ccc; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="scroller"> <p> </p> </div>