javascript - 使用javascript更改伪后元素的样式

Question

是否可以使用 javascript 更改伪 :after 元素的样式，如下所示:

document.querySelector('#test:after').attr("style", "content:url('blabla.png')");

像这样单击 1 次后是否有更改图像的解决方法:

var timesClicked = 0;
span = document.querySelector('.socialShare');

span.addEventListener('click', function (e) {
  timesClicked++;
  if (timesClicked > 1) {
      document.querySelector('#socialShare').style.left = '-60px';
      timesClicked = 0;
      console.log(timesClicked)
  } else {
    document.querySelector('#socialShare').style.left = '0';
    document.querySelector('#socialShare:after').attr("style", "content:url('blabla.png')");
    console.log(timesClicked)
  }
});

或者也许更好地转换图像，它是关于一个箭头，当 div 展开时需要指向另一个方向

Answer 1

您不能使用 javascript 更改伪元素的样式，因为它们不是 DOM 的一部分，因此没有任何 API 可以使用。

通常的方法是改变元素本身的类，让这些类影响相关的伪元素。例如你的情况:

// Add class selected to element
document.querySelector('#test').classList.add('selected')

在 CSS 中:

#test.selected::after {
  content: url('blabla.png');
}