通过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的属性“style”

还有别的办法吗？

---

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

看起来querySelector无法处理伪类/伪元素，至少不能处理这些类/伪元素。我唯一能想到的就是动态添加样式表（或更改现有样式表）来完成您需要的工作

这里有很多好例子：

---

看起来querySelector无法处理伪类/伪元素，至少不能处理这些类/伪元素。我唯一能想到的就是动态添加样式表（或更改现有样式表）来完成您需要的工作

这里有很多好例子：

---

在JavaScript中不能将样式应用于psuedo元素

但是，您可以将

标记附加到文档的头部（或放置一个放置

的位置并更改其内容），以调整样式。（这比在另一个样式表中加载效果更好，因为嵌入的

标记的优先级高于

'd标记，确保不会出现级联问题

---

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

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

但是，您可以将

标记附加到文档的头部（或放置一个放置

的位置并更改其内容），以调整样式。（这比在另一个样式表中加载效果更好，因为嵌入的

标记的优先级高于

'd标记，确保不会出现级联问题

---

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

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

这里引用了我发布的一个为伪元素添加新CSS的方法，这个简单的版本是从js设置的

---

sheet.insertRule

返回新规则的索引，您可以使用该索引获取对该规则的引用，以便以后编辑该规则。

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

这里引用了我发布的一个为伪元素添加新CSS的方法，这个简单的版本是从js设置的

sheet.insertRule

返回新规则的索引，您可以使用该索引获取对该规则的引用，以便以后编辑该规则

编辑：从技术上讲，可以通过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');

编辑：从技术上讲，可以通过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');

---

我发布了一个类似于但不完全像这个问题的问题

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

我的问题是

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

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

并将其更改为：

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

当然，您必须更改样式表和cssRules索引。请阅读我的问题和它给出的注释

---

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

我发布了一个类似于但不完全像这个问题的问题

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

我的问题是

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

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

并将其更改为：

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

当然，您必须更改样式表和cssRules索引。请阅读我的问题和它给出的注释

---

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

如果你对旧浏览器中的一些优雅降级感到满意，你可以使用CSS变量。这绝对是我在这里和其他地方见过的最简单的方法

因此，您可以在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变量的例子：

如果你对旧浏览器中的一些优雅降级感到满意，你可以使用CSS变量。这绝对是我在这里和其他地方见过的最简单的方法

因此，您可以在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"));

还有很多其他操作C的例子