通过JavaScript更改CSS伪元素样式
是否可以通过JavaScript更改CSS伪元素样式？
例如，我想动态设置滚动条的颜色，如下所示：
document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");我还希望能够像这样告诉滚动条隐藏：
document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";然而，这两个脚本都返回：
未捕获样式:无法读取null的属性“TypeError”
有没有其他方法来解决这个问题呢？
跨浏览器互操作性并不重要，我只需要它在webkit浏览器中工作。
回答 8
Stack Overflow用户
发布于 2012-08-31 08:47:01
CSS编辑：从技术上讲，有一种方法可以通过JavaScript直接更改伪元素样式，比如this answer describes，但这里提供的方法更可取。
最接近于在JavaScript中更改伪元素样式的方法是添加和删除类，然后对这些类使用伪元素。隐藏滚动条的示例：
CSS
.hidden-scrollbar::-webkit-scrollbar {
visibility: hidden;
}JavaScript
document.getElementById("editor").classList.add('hidden-scrollbar');要在以后删除相同的类，您可以使用：
document.getElementById("editor").classList.remove('hidden-scrollbar');Stack Overflow用户
发布于 2018-04-19 04:29:53
如果您对较旧浏览器中的一些优雅降级感到满意，您可以使用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/
Stack Overflow用户
发布于 2011-11-08 21:55:38
要编辑没有直接引用的现有样式表，需要迭代页面上的所有样式表，然后迭代每个样式表中的所有规则，然后是与选择器匹配的字符串。
这里引用了我发布的一个方法，用于为伪元素添加新的CSS，这个简单的版本是从js设置的
Javascript set CSS :after styles
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返回新规则的索引，您可以使用该索引获取对该规则的引用，稍后可以使用该引用对其进行编辑。
https://stackoverflow.com/questions/4481485
复制相似问题