如何使用javascript或jquery选择供应商前缀

Question

我们可以自定义供应商特定的css。以下示例：

::-webkit-scrollbar {
background-color: red;
}

但如果与jquery一起使用相同的选择器，它将不起作用：

$('::-webkit-scrollbar').css({backgroundColor:'red');

那么，我们如何选择供应商特定的选择器呢？

Answer 1

您本身不能。您只能选择元素，而不能选择伪元素。

滚动条没有可修改的style属性。

如果你想修改它的CSS，那么你需要为它编写一个CSS规则

您可以通过Stylesheet API使用JavaScript来实现这一点，也可以将规则写入样式表，然后通过向元素添加class来激活它们。

后一种方法可能更简单。

document
.querySelector("button")
.addEventListener( 
"click", 
event =>
document
.querySelector(".foo")
.classList
.toggle("bar") 
);

.foo {
height: 5em;
width: 50%;
margin: 1em auto;
padding: 1em;
overflow: auto;
border: grey outset 3px;
}
.bar::-webkit-scrollbar {
background: red;
}

<div class="foo">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<button>click me</button>