你能用 JavaScript 修改 CSS 伪元素样式吗？

使用 JavaScript 修改 CSS 伪元素样式

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

考虑使用以下代码动态设置滚动条颜色的示例：

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

但是，浏览器会响应以下错误：“Uncaught TypeError: Cannot read property 'style' of null.”

这个任务可以用不同的方式完成吗？

在 webkit 浏览器中，您可以通过利用 CSS 变量来实现此任务。

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

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

要在 JavaScript 中操作此值：

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

有关使用 JavaScript 管理 CSS 变量的更多示例，请参阅以下资源：https://eager.io/blog/communicating- Between-javascript-and-css-with-css-variables/

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