通过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');