Question

是否可以使用类似这样的javascript更改伪造:after元素的样式：

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

是否有任何解决方法可以在单击后更改图像，如下所示：

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');
}

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

1 个答案: