是否可以通过 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/
要编辑您没有直接引用的现有样式表，需要迭代页面上的所有样式表，然后迭代每个样式表中的所有规则，然后是匹配选择器的字符串。
这是我发布的为伪元素添加新 CSS 的方法的参考，这是您从 js 设置的简单版本
var addRule = (function (style) {
var sheet = document.head.appendChild(style).sheet;
return function (selector, css) {
var propText = typeof css === "string" ? css : Object.keys(css).map(function (p) {
return p + ":" + (p === "content" ? "'" + css[p] + "'" : css[p]);
}).join(";");
sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
};
})(document.createElement("style"));
addRule("p:before", {
display: "block",
width: "100px",
height: "100px",
background: "red",
"border-radius": "50%",
content: "''"
});
sheet.insertRule 返回新规则的索引，您可以使用它来获取对它的引用，以后可以使用它来编辑它。
编辑：有是技术上的通过JavaScript直接更改CSS伪元素的样式，以此这个答案说明，但这里提供的方法是优选的。
最接近改变 JavaScript 中伪元素样式的方法是添加和删除类，然后将伪元素与这些类一起使用。隐藏滚动条的示例：
CSS
.hidden-scrollbar::-webkit-scrollbar {
visibility: hidden;
}
JavaScript
document.getElementById("editor").classList.add('hidden-scrollbar');
要稍后删除相同的类，您可以使用：
document.getElementById("editor").classList.remove('hidden-scrollbar');
我通过使用 CSS 自定义属性执行以下操作更改了 ::selection 伪元素的背景：
/*CSS Part*/
:root {
--selection-background: #000000;
}
#editor::selection {
background: var(--selection-background);
}
//JavaScript Part
document.documentElement.style.setProperty("--selection-background", "#A4CDFF");
您不能在 JavaScript 中将样式应用于伪元素。
但是，您可以将<style>标签附加到文档的头部（或具有占位符<style id='mystyles'>并更改其内容），从而调整样式。（这比加载另一个样式表效果更好，因为嵌入<style>标签的优先级高于<link>'d标签，确保您不会遇到级联问题。
或者，您可以使用不同的类名，并在原始样式表中使用不同的伪元素样式定义它们。