是否可以通过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浏览器中即可工作。
编辑 : 从技术上讲,有一种通过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');