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

Question

我明白了:

You can't modify pseudo elements through JavaScript since they are not part of the DOM

我还知道我们可以通过附加样式在伪元素中添加属性 -- more .

但是，附加的解决方案只能增加值(value)。添加并不意味着动态变化的能力。我还需要替换属性值的能力。

因此，我尝试使用attr() 来动态改变背景图片。但是，目前 attr 仅支持 content 属性 - more .

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

为了添加更多问题的上下文，基本上，我想在聊天中动态更新头像图像。头像设置在伪元素中(before and after)。这是 Chat UI 的代码笔 -- http://codepen.io/clintioo/pen/HAkjq

非常感谢!

Answer 1

如其他答案所述，有一种方法可以注入(inject)会影响您的伪元素的样式。

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

function changebkg ()  {
	target1 = document.getElementById('test');
	target1.style.backgroundImage = "url(http://placekitten.com/1000/750)";
}

#test {
  font-size: 40px;
  position: relative;
  display: inline-block;
  color: black;
  background-size: 0px;
  background-color: lightblue;
}

#test:after {
  content: "";
  position: absolute;
  left: 200px;
  top: 20px;
  width: 200px;
  height: 200px;
  background-image: inherit;
  border: solid 1px;
  background-size: contain;
}

<div id="test" onclick="changebkg();">click me</div>