如何动态更改CSS伪元素属性？

我明白：

不能通过JavaScript修改伪元素，因为它们不是DOM的一部分

我还知道我们可以通过添加样式-，在pseudo元素中添加属性

但是，附加解决方案只能增加价值。添加并不意味着动态更改的能力。我还需要具备替换属性值的能力

因此，我尝试使用attr动态更改背景图像。但是，当前attr仅支持内容属性-

那么我还能在这里尝试什么呢

为了增加问题的更多上下文，基本上，我想在聊天中动态更新化身图像。化身图像在前后以伪元素设置。这是聊天界面的代码笔-

多谢各位

正如您刚刚了解到的，目前除了content属性外，其他任何地方都不支持attr。如果您的需求是动态设置其他CSS属性，那么恐怕您无法仅在CSS中完成这项工作。最接近的方法是通过脚本动态生成静态CSS，如您链接到的第一个问题的大量答案所示

---

在用户化身的特定情况下，我不明白为什么不使用img元素来标记这些化身，这将完全避免这个问题。

您可以创建一个css文件，然后将其注入DOM

var avatar_css_for_avatar = document.createElement('style');
avatar_css_for_avatar.type = 'text/css';
avatar_css_for_avatar.innerHTML = '.user-avatar-id:before { background-image: url(url_of_image); }';
document.getElementsByTagName('head')[0].appendChild(avatar_css_for_avatar);

document.getElementById('someElementId').className = 'user-avatar-id';

下面是中的一部分，演示如何使用Javascript动态获取、添加和更改CSS伪元素属性

堆栈片段

/*页面加载*/ window.addEventListener'load'，函数{ /*获取按钮并向其添加单击事件*/ var btn=document.querySelector'button'； btn.addEventListenerclick，函数{ /*获取第一个元素*/ var el1=document.querySelector'p.first'； /*获取第二个元素*/ var el2=document.querySelector'p.second'； /*首先获取pseudo的内容属性值*/ var str=window.getComputedStylel1'：在.getPropertyValue'content'之前； /*首先获取pseudo的颜色属性值*/ var col=window.getComputedStylel1'：在.getPropertyValue'color'之前； /*动态地将规则添加到样式表中，以便第二个 将获得与第一个相同的内容/颜色值*/ document.styleSheets[0]。addRule'p.second:在'，'内容：'+str+'；颜色：'+col+'；'； /*在样式表中动态添加覆盖 首先将颜色改为绿色*/ document.styleSheets[0]。addRule'p.first:before'，'color:green；'； }; }; p、 第一：以前{ 内容:富,； 颜色：红色； } 钮扣{ 显示：块； 宽度：220px； 边缘顶部：50px； }

这是一段

这是另一段

---

更改/添加伪属性正如在其他答案中所说的，有一种方法可以注入影响伪元素的样式

对于您的特定情况，一个更简单的解决方法可能是从基本元素继承背景，因为您不使用它

功能改变{ target1=document.getElementById'test'； target1.style.backgroundImage=urlhttp://placekitten.com/1000/750; } 试验{ 字体大小：40px； 位置：相对位置； 显示：内联块； 颜色：黑色； 背景尺寸：0px； 背景颜色：浅蓝色； } 测试：之后{ 内容：； 位置：绝对位置； 左：200px； 顶部：20px； 宽度：200px； 高度：200px； 背景图像：继承； 边框：实心1px； 背景尺寸：包含； }

---

单击meIs不更好地定义一个带有img内部或背景的标记吗？在CSS中编写base64图像时，您必须使用的技术，除了动态之外，其他都是必需的。您需要覆盖新化身的css。我认为最好忘记这个技巧，把这个变量内容放在css之外。在上面的重复问题中，它有一个部分显示了如何操作伪元素的属性。看到如何制作这个东西很有趣，但这确实是必要的，还是我们正在测试浏览器的性能和功能？我认为这不会给最终用户带来任何好处。我不仅仅谈论你的答案，我谈论整个问题好吧，首先，在没有img元素的情况下表示图像是个坏主意，谁会索引页面，比如谷歌不会看到图像本身，它不会出现，为什么？因为它不遵循全局约定，所以即使要打印文档也很重要，因为不会打印这些伪元素甚至背景图像。问题和答案都与浏览器的性能/功能无关，这是一个惯例的问题，以及如何解决这些惯例。