通过JavaScript更改CSS伪元素样式

Question

通过JavaScript更改CSS伪元素样式

是否可以通过JavaScript更改CSS伪元素样式？

例如，我想动态设置滚动条的颜色，如下所示：

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");

而且我也希望能够像这样告诉滚动条隐藏：

document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

但是，这两个脚本都返回：

未捕获的TypeError：无法读取null的属性'style'

还有其他方法可以解决这个问题吗？
跨浏览器的互操作性并不重要，我只需要它在webkit浏览器中工作。

Answer 1

从技术上讲，这是一种通过JavaScript直接更改CSS伪元素样式的方法，如本答案所述，但此处提供的方法更可取。在JavaScript中最接近改变伪元素的样式是添加和删除类，然后使用伪元素和这些类。隐藏滚动条的示例：CSS.hidden-scrollbar::-webkit-scrollbar {    visibility: hidden;}JavaScript的document.getElementById("editor").classList.add('hidden-scrollbar');要稍后删除同一个类，您可以使用：document.getElementById("editor").classList.remove('hidden-scrollbar');