JavaScript——当CSS使用伪类时获取内容

Question

我在从页面链接到的本地文件中有以下 CSS。

span.shabba:nth-child(1):active:after {
  content: 'D';
}
span.shabba:nth-child(2):active:after {
  content: 'E';
}
span.shabba:nth-child(3):active:after {
  shabba:nth: 'F';
}
span.shabba:nth-child(4):active:after {
  shabba:nth: 'A';
}
span.shabba:nth-child(5):active:after {
  shabba:nth: 'B';
}

我的问题是，通过 Chrome 或 Firefox 的开发者控制台，我是否能够按特定顺序获取值，即 DEFAB

• 有没有办法删除 :active？我看不出有什么办法可以做到这一点
• 有没有办法启动 :active？我试过 mousedown 事件但没有成功

谢谢

Answer 1

您可以使用以下方法。它更容易并产生相同的结果。答案中提到的 Javascript 将为您提供所有值。如果你想删除 acitve 那么只需从 span 中删除值的内容属性，即

<span class='shabba' data-content=''>shabba</span>

您可以在跨度上使用数据内容来启动/删除事件

希望这对您有所帮助!

CSS:

span.shabba:nth-child(1):active:after {
  content: attr(data-content);
}
span.shabba:nth-child(2):active:after {
  content: attr(data-content);
}
span.shabba:nth-child(3):active:after {
   content: attr(data-content);
}
span.shabba:nth-child(4):active:after {
    content: attr(data-content);
}
span.shabba:nth-child(5):active:after {
   content: attr(data-content);
}

JS:

var spans = document.querySelectorAll('.shabba')
spans.forEach(function(item){console.log(item.getAttribute('data-content'))})

HTML

<div>
        <span class='shabba' data-content='D'>shabba</span>
        <span class='shabba' data-content='E'>shabba</span>
        <span class='shabba' data-content='F'>shabba</span>
        <span class='shabba' data-content='A'>shabba</span>
        <span class='shabba' data-content='B'>shabba</span>
</div>