Question

我明白了：

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

我也知道我们可以通过附加样式 - more来添加伪元素中的属性。

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

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

那我还可以尝试一下呢？

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

非常感谢！

Answer 1

以下是"duplicate"中的部分，其中显示了如何使用Javascript动态获取，添加和更改CSS伪元素属性。

Stack snippet

＆＃13;

/*  on page load  */
window.addEventListener('load', function() {

  /*  get button and add click event to it  */
  var btn = document.querySelector('button');
  btn.addEventListener("click", function(){

    /*  get first <p> element  */
    var el1 = document.querySelector('p.first');

    /*  get second <p> element  */
    var el2 = document.querySelector('p.second');

    /*  get first <p> pseudo's "content" property value  */
    var str = window.getComputedStyle(el1,':before').getPropertyValue('content');

    /*  get first <p> pseudo's "color" property value  */
    var col = window.getComputedStyle(el1,':before').getPropertyValue('color');

    /*  dynamically add a rule to the stylesheet so the second <p>
        will get the same "content"/"color" value as the first  */
    document.styleSheets[0].addRule('p.second:before', 'content: ' + str + ' ; color: ' + col + ';');

    /*  dynamically add a rule to the stylesheet that override the
        first <p> "color" to green  */
    document.styleSheets[0].addRule('p.first:before', 'color: green;');
  
  });
  
});

＆＃13;

p.first:before {
    content:"foo";
    color: red;
}

button {
  display: block;
  width: 220px;
  margin-top: 50px;
}

＆＃13;

<p class="first">This is a paragraph</p>
<p class="second">This is another paragraph</p>

<button>Change/Add pseudo properties</button>

＆＃13;

Answer 2

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

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

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>

Answer 3

正如您刚刚了解到的，目前除了attr()属性之外的其他任何地方都不支持content。如果你的要求是动态设置其他CSS属性，那么我担心你不能仅仅在CSS中做很多事情。您可以获得的最接近的是通过脚本动态生成静态CSS，如您链接的第一个问题的许多答案所示。

在用户头像的特定情况下，我不明白为什么你不仅仅使用img元素标记这些，这将完全消除这个问题。

Answer 4

您可以创建一个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';

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

4 个答案: