如何将类添加到伪元素答案

【问题标题】：How to add a class to psuedo-element如何将类添加到伪元素
【发布时间】：2015-11-20 20:42:49
【问题描述】：

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

这是我的 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, ' ')
  }
}

【问题讨论】：

:before 和 :after 不能有额外的类，因为它们实际上不是 DOM 的一部分。如果要添加监听器，则需要创建一个子元素。
Only detect click event on pseudo-element的可能重复

标签： javascript addeventlistener pseudo-element

【解决方案1】：

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

但是，您可以向（父）元素添加类，正如您已经想到的那样。该类不需要对元素本身产生任何影响，并且可以仅用于设置其包含的伪元素的样式。

【讨论】：