通过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无法处理伪类/伪元素，至少不能处理这些类/伪元素。我唯一能想到的就是动态添加样式表（或更改现有样式表）来完成您需要的工作

这里有很多好例子：

---

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

但是，您可以将

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

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

标记的优先级高于

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

---

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

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

这里引用了我发布的一个为伪元素添加新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');

---

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

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

我的问题是

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

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变量的例子：

这是一个老问题，但我在尝试动态更改元素的

：before

选择器内容的颜色时遇到了这个问题

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

"#editor::-webkit-scrollbar-thumb:vertical {
    background: --editorScrollbarClr
}

更改JavaScript中的值：

document.body.style.setProperty(
    '--editorScrollbarClr', 
     localStorage.getItem("Color")
);

---

其他属性也可以这样做。

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

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

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

---

这太棒了。要在以后使用规则（并删除它），我必须编辑它以实际返回sheet.insertRule（）的结果。我还让它返回新添加的样式表，以便可以调用.removeRule。我添加了对

内容的检查，甚至在输入已经是字符串时添加了回退。我担心此解决方案会使事情变得过于复杂，违反KISS原则和在样式表中保留样式的惯例。这尤其有用l用于编写界面，允许用户可视化对现有小部件框架（如jquery ui、jquery mobile…）的CSS更改，这些框架大量使用图标的伪元素。如上所述（由其他人）在你的链接帖子中，我无法让
content
属性以这种方式工作。这恰好是我需要它的全部原因，所以这很难。
querySelector
不能处理任何伪元素，因为它们是伪元素，而不是DOM中存在的实际元素。对，它在旧浏览器中不起作用（），但它将转到回退。如果需要针对特定元素，这是最好的答案。为了与IE兼容，请包括并运行
cssVars（{variables:{'scrollbar background'：'#color'}）
更新时。节省了我的时间。谢谢。我已经在使用css变量更改滚动条的颜色，但它只是更新所有内部滚动条，而不是主滚动条（在整个页面上）。因此，我使用insertRule（）插入了新的css规则因此，当用户选择一个新主题时，它会做两件事来删除规则（如果有的话）并用新颜色插入规则。这真的很聪明。很好的解决方案。这不是问题的答案。这甚至不相关。事实上，这是一个伟大而简单的解决方法。它根本不是解决方法。这是一个标准操作过程，当你的样式可以静态定义时。如果你不知道样式将是什么，直到r直到现在，这都帮不了你。添加或删除类名并不会直接改变元素的值。出于某种原因，移动到中心点怎么样？你需要正确计算？这是我为addi找到的唯一正常答案
/*CSS Part*/
:root {
    --selection-background: #000000;
}
#editor::selection {
    background: var(--selection-background);
}

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