css js html伪元素点击,通过JavaScript更改CSS伪元素样式

通过JavaScript更改CSS伪元素样式

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

例如，我想像这样动态设置滚动条的颜色：

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

而且我还希望能够告诉滚动条这样隐藏：

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

但是，这两个脚本都返回：

未捕获的TypeError：无法读取null的属性“样式”

还有其他解决方法吗？

跨浏览器的互操作性并不重要，我只需要它在Webkit浏览器中即可工作。

7个解决方案

28 votes

编辑：如本答案所述，从技术上讲，有一种直接通过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');

Chris Fritz answered 2020-01-06T09:52:27Z

20 votes

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

这是我发布的用于为伪元素添加新CSS的方法的参考，伪代码是从js设置的简单版本

Javascript设置CSS：after样式

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返回新规则的索引，您可以使用该索引获取对此规则的引用，以后可以使用该规则对其进行编辑。

Community answered 2020-01-06T09:53:01Z

17 votes

如果您对旧版浏览器的性能下降感到满意，则可以使用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/communication-between-javascript-and-css-with-css-variables/]

Wes Ruvalcaba answered 2020-01-06T09:53:34Z

4 votes

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

但是，您可以将

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

Niet the Dark Absol answered 2020-01-06T09:54:04Z

3 votes

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

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

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

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

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

并更改为：

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

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

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

SimonT answered 2020-01-06T09:54:55Z

0 votes

看起来querySelector不适用于伪类/伪元素，至少不适用于那些伪类/伪元素。 我唯一想到的就是动态添加样式表(或更改现有样式表)以执行所需的操作。

这里有很多很好的例子：如何在Webkit(Safari / Chrome)中动态加载CSS规则？

Hemlock answered 2020-01-06T09:55:20Z

0 votes

这是一个古老的问题，但是在尝试动态更改元素:before选择器内容的颜色时遇到了一个问题。

我能想到的最简单的解决方案是使用CSS变量，当提出问题时该解决方案不适用：

"#editor::-webkit-scrollbar-thumb:vertical {

background: --editorScrollbarClr

}

更改JavaScript中的值：

document.body.style.setProperty(

'--editorScrollbarClr',

localStorage.getItem("Color")

);

其他属性也可以这样做。

LeeGee answered 2020-01-06T09:55:53Z