通过JavaScript更改CSS伪元素样式

Question

是否可以通过JavaScript更改CSS伪元素样式？

例如,我想动态设置滚动条的颜色,如下所示:

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");

而且我也希望能够像这样告诉滚动条隐藏:

document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

但是,这两个脚本都返回:

未捕获的TypeError:无法读取null的属性'style'

还有其他方法可以解决这个问题吗？
跨浏览器的互操作性并不重要,我只需要它在webkit浏览器中工作.

Answer 1

编辑:从技术上讲,这是一种通过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');

Answer 2

要编辑您没有直接引用的现有版本,需要迭代页面上的所有样式表,然后迭代每个样式表中的所有规则,然后匹配选择器的字符串.

这是我发布的用于为伪元素添加新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 返回新规则的索引,您可以使用该索引获取对它的引用,稍后可以使用它来编辑它.

Answer 3

如果您对旧浏览器中的某些优雅降级感到满意,则可以使用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/

Answer 4

我通过使用 CSS 自定义属性执行以下操作更改了 ::selection 伪元素的背景：

/*CSS Part*/
:root {
    --selection-background: #000000;
}
#editor::selection {
    background: var(--selection-background);
}

//JavaScript Part
document.documentElement.style.setProperty("--selection-background", "#A4CDFF");

Answer 5

您不能在 JavaScript 中将样式应用于伪元素。

但是，您可以将<style>标签附加到文档的头部（或具有占位符<style id='mystyles'>并更改其内容），从而调整样式。（这比加载另一个样式表效果更好，因为嵌入<style>标签的优先级高于<link>'d标签，确保您不会遇到级联问题。

或者，您可以使用不同的类名，并在原始样式表中使用不同的伪元素样式定义它们。

Answer 6

我发布了一个与此问题类似但不完全相似的问题。

我找到了一种检索和更改伪元素样式的方法，并询问人们对该方法的看法。

我的问题是检索或更改伪元素的 css 规则

基本上，您可以通过以下语句获取样式：

document.styleSheets[0].cssRules[0].style.backgroundColor

并更改为：

document.styleSheets[0].cssRules[0].style.backgroundColor = newColor;

当然，您必须更改样式表和 cssRules 索引。阅读我的问题及其引起的评论。

我发现这适用于伪元素以及“常规”元素/样式。