是否可以通过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浏览器中工作。
发布于 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');
发布于 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/
发布于 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
复制相似问题