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

Question

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

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

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

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

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

Answer 1

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

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

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

您可以通过 样式表 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>