是否可以通过 JavaScript 更改 CSS 伪元素样式？
例如，我想动态设置滚动条的颜色，如下所示：
document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");
我还希望能够告诉滚动条隐藏，如下所示：
document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";
但是，这两个脚本都会返回：
未捕获的类型错误：无法读取 null 的属性“样式”
还有其他方法可以解决这个问题吗？
跨浏览器互操作性并不重要，我只需要它能够在 webkit 浏览器中工作。
如果您对旧版浏览器中的一些优雅降级感到满意，则可以使用 CSS Vars。绝对是我在这里和其他地方见过的最简单的方法。
所以在你的 CSS 中你可以这样写：
#editor {
--scrollbar-background: #ccc;
}
#editor::-webkit-scrollbar-thumb:vertical {
/* Fallback */
background-color: #ccc;
/* Dynamic value */
background-color: var(--scrollbar-background);
}
然后在 JS 中，您可以在 #editor 元素上操作该值：
document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));
这里还有很多使用 JS 操作 CSS 变量的示例：https://eager.io/blog/communicating- Between-javascript-and-css-with-css-variables/ https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
