Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/search/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用javascript更改psuedo after元素的样式_Javascript - Fatal编程技术网

使用javascript更改psuedo after元素的样式

使用javascript更改psuedo after元素的样式,javascript,Javascript,是否可以使用javascript更改psuedo:元素之后的样式,如下所示: document.querySelector('#test:after').attr("style", "content:url('blabla.png')"); var timesClicked = 0; span = document.querySelector('.socialShare'); span.addEventListener('click', function (e) { timesClick

是否可以使用javascript更改psuedo
:元素之后的样式,如下所示:

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)
  }
});
单击1次后是否有任何解决方法更改图像,如下所示:

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展开时,箭头需要指向另一个方向。您不能用javascript更改伪元素的样式,因为它们不是DOM的一部分,因此没有任何API可以使用

通常的方法是更改元素本身的类,并使这些类影响相关的伪元素。例如,在您的案例中:

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

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

不,不可能。@dfsq由于我想在单击两次时更改图像url,您有什么解决方法吗