通过JavaScript更改CSS伪元素样式

小编典典

javascript

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

例如，我想像这样动态设置滚动条的颜色：

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

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

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

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

未捕获的TypeError：无法读取null的属性“样式”

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

阅读 861

2020-04-25

共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');

2020-04-25