通过JavaScript更改CSS伪元素样式
是否有可能通过JavaScript更改CSS伪元素样式？
例如，我想dynamic设置滚动条的颜色，如下所示：
document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color"); 我也想能够告诉滚动条隐藏像这样：
document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";
但是，这两个脚本都会返回：
Uncaught TypeError：无法读取null的属性'style'
有没有其他的方式去做这件事？
跨浏览器的互操作性并不重要，我只是需要它在webkit浏览器中工作。
编辑 ： 从技术上讲，通过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');
要编辑一个你没有直接参考的现有的需要迭代页面上的所有样式表，然后迭代每个样式表中的所有规则，然后匹配select器的string。
下面是一个我为发布伪元素而添加新CSS的方法的引用，这是从js设置的简单版本
Javascript设置CSS：样式之后
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中的psuedo-elements。
但是，您可以将<style>标签附加到文档的头部（或者占有<style id='mystyles'>并更改其内容），从而调整样式。 （这会比在另一个样式表中加载更好，因为embedded的<style>标记比<link>具有更高的优先级，确保不会出现级联问题。
或者，您可以使用不同的类名，并使用不同的伪元素样式在原始样式表中定义它们。
我发布了一个类似的问题，但不完全像这个问题。
我find了一种方法来检索和更改伪元素的样式，并询问人们对该方法的看法。
我的问题是在检索或更改伪元素的CSS规则
基本上，您可以通过以下语句获得样式：
document.styleSheets[0].cssRules[0].style.backgroundColor
并改变一个：
document.styleSheets [0] .cssRules [0] .style.backgroundColor = newColor;
您当然必须更改样式表和cssRules索引。 阅读我的问题和它提出的意见。
我发现这适用于伪元素以及“常规”元素/样式。
数据属性将是最好的解决scheme。 看到
http://pankajparashar.com/posts/modify-pseudo-elements-css/
你也可以使用cssom。 请参阅上述链接中的方法4
看起来像querySelector不会与伪类/伪元素，至less不是那些。 我唯一能想到的就是dynamic添加一个样式表（或者改变一个现有的样式表）去做你所需要的。
这里有很多很好的例子： 如何在Webkit（Safari / Chrome）中dynamic加载css规则？
