JavaScript 可以动态修改 CSS 伪元素样式吗？

用 JavaScript 修改 CSS 伪元素样式：仔细看看

是否可以通过以下方式动态更改 CSS 伪元素的样式JavaScript？假设我们希望设置滚动条的颜色并将其完全隐藏。但是，使用如下脚本会返回“无法读取 null 的属性‘样式’”错误：

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

让我们探索一种在 Webkit 浏览器中有效工作并允许在其他浏览器中优雅降级的替代方法。

利用 CSS 变量进行样式设置

现代浏览器提供 CSS 变量 (CSS Vars)，它提供了一种从 JavaScript 定义和操作自定义 CSS 属性的强大方法。通过使用 CSS Var，您可以在保持跨浏览器兼容性的同时实现所需的样式效果。

在 CSS 中，定义 CSS Var --scrollbar-background 并将其应用到滚动条的拇指：

#editor {
  --scrollbar-background: #ccc;
}

#editor::-webkit-scrollbar-thumb:vertical {
  background-color: #ccc;
  background-color: var(--scrollbar-background);
}

现在，在 JavaScript 中，修改 #editor 上的 --scrollbar-background 属性元素：

document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));

通过将 CSS 变量与 JavaScript 结合使用，您可以轻松更改伪元素样式并确保在各种 Web 浏览器中的兼容性。

以上是JavaScript 可以动态修改 CSS 伪元素样式吗？的详细内容。更多信息请关注PHP中文网其他相关文章！