通过JavaScript更改CSS伪元素样式

  • Z时代
  • 2024-01-10
  • 分类：问答

是否可以通过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中的伪元素样式最接近的是添加和删除类，然后将伪元素与这些类一起使用。隐藏滚动条的示例：

.hidden-scrollbar::-webkit-scrollbar {
   visibility: hidden;
}

document.getElementById("editor").classList.add('hidden-scrollbar');

要以后删除相同的类，可以使用：

document.getElementById("editor").classList.remove('hidden-scrollbar');

以上是 通过JavaScript更改CSS伪元素样式 的全部内容， 来源链接： utcz.com/qa/429240.html

回到顶部