如何使用 JavaScript 动态设置 CSS 伪元素样式？

使用 JavaScript 动态 CSS 伪元素样式

使用 JavaScript 修改 CSS 伪元素样式是否可行？例如，动态调整滚动条颜色或隐藏它。但是，尝试使用这些脚本执行此操作会导致“类型错误：无法读取 null 的属性“样式”。”

解决方案：引入 CSS 变量

而跨浏览器互操作性可能不是优先考虑的问题，使用 CSS 变量（CSS Vars）在 WebKit 浏览器中提供了有效的解决方案。此方法允许您在 CSS 中声明变量并使用 JavaScript 动态修改它们。

在 CSS 中，将滚动条背景颜色定义为变量：

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

然后，设置滚动条缩略图的样式使用变量：

#editor::-webkit-scrollbar-thumb:vertical {
  /* Fallback */
  background-color: #ccc;
  /* Dynamic value */
  background-color: var(--scrollbar-background);
}

在 JavaScript 中，您可以更改 #editor 上的变量值element:

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

此方法允许您动态修改滚动条颜色，而无需直接访问伪元素的样式，从而避免“TypeError”问题。

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

以上是如何使用 JavaScript 动态设置 CSS 伪元素样式？的详细内容。更多信息请关注PHP中文网其他相关文章！