如何给伪元素加一个class

Question

我有几个元素，我想在它们被点击时添加一个 class 到它们的伪 :before 元素。目前我已将 class 添加到元素中，但我无法弄清楚如何将侦听器附加到元素并将 class 添加到伪元素。

这是我的 HTML:

<div class="locked-item"></div>

SCSS:

.locked-item{
  &:before {
    content: '';
    background-image: url(../../images/lock.svg);
    background-position: center center;
    background-size: cover;
    background-size: 37%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  background-color: @brand-green;
  transition: all .2s;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0;
}

Javascript:

setTimeout(function() {

    var lockItems = document.getElementsByClassName('locked-item');

    for (var i = 0; i < lockItems.length; i++) {
      lockItems[i].addEventListener('click',handleClick,false);
    }

}, 100);

function handleClick(){
    addClass(this, 'jiggle-click');
    setTimeout(function() { 
        removeClass(this, 'jiggle-click');
    }.bind(this), 820);
}


function hasClass(el, className) {
  if (el.classList)
    return el.classList.contains(className)
  else
    return !!el.className.match(new RegExp('(\s|^)' + className + '(\s|$)'))
}

function addClass(el, className) {
  if (el.classList)
    el.classList.add(className)
  else if (!hasClass(el, className)) el.className += " " + className
}

function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className)
  else if (hasClass(el, className)) {
    var reg = new RegExp('(\s|^)' + className + '(\s|$)')
    el.className=el.className.replace(reg, ' ')
  }
}

Answer 1

你不能。如果伪元素有内容（从 CSS 给出），它就会被渲染。您可以设置它的样式，但不能向它添加事件处理程序或以其他方式从 Javascript 访问它。这也意味着您不能给他们 classes。

但是，您可以将 classes 添加到（父）元素，正如您已经知道的那样。 class 不需要对元素本身产生任何影响，可以仅用于设置它包含的伪元素的样式。

如何给伪元素加一个class

How to add a class to psuedo-element

javascript

addeventlistener

pseudo-element