如何使用 JavaScript 修改 CSS 伪元素样式而不出现'Uncaught TypeError: Cannot read property 'style' of null”？

使用 JavaScript 修改 CSS 伪元素样式

在尝试使用 JavaScript 调整滚动条的颜色和可见性时，经常会遇到错误“未捕获类型错误：无法读取 null 的属性‘样式’”。出现这种情况是因为网站默认禁用滚动，导致滚动条元素不存在。

要解决此限制，您可以采用 CSS Vars 技术。此方法涉及在 CSS 中定义后备值，并使用 JavaScript 中的 CSS 变量动态操作它们。

在 CSS 中，使用后备值定义滚动条样式，如下所示：

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

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

然后，在 JavaScript 中，修改控制滚动条背景颜色的变量：

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

这种方法允许动态修改滚动条样式，而不会遇到“空”错误。请记住，并非所有浏览器都支持此技术，因此请考虑对旧版浏览器进行优雅降级。

以上是如何使用 JavaScript 修改 CSS 伪元素样式而不出现'Uncaught TypeError: Cannot read property 'style' of null”？的详细内容。更多信息请关注PHP中文网其他相关文章！