小编典典

通过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浏览器中即可工作。


阅读 860

收藏
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