Question

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

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

但是如果与jquery一起使用，则该选择器将不起作用：

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

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

Answer 1

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

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

如果要修改其CSS，则需要为其编写CSS规则。

您可以通过the 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>

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

1 个答案: