如何在javascript中查找和获取元素的 ::after 或 ::before？ [复制]答案

【问题标题】：how to find and get an ::after or ::before of an element in javascript? [duplicate]如何在javascript中查找和获取元素的 ::after 或 ::before？ [复制]
【发布时间】：2021-06-17 22:24:23
【问题描述】：

这是我的代码：

.back-div::after {
    background: black;
    content: "";
    opacity: 100%;
    position: absolute;
    display: none;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 70%;
    height: 100%;
    z-index: 100;
}

如何获取或查找 backdiv::after ?? 请给出最简单的方法，因为我连一个库都不知道

【问题讨论】：

标签： javascript html css

【解决方案1】：

你可以这样做：

let color = window.getComputedStyle(
    document.querySelector('.back-div'), ':after'
).getPropertyValue('color')

【讨论】：

爱你男人????
@BehradMoosavi 不客气，如果问题解决了您的问题，请随时将问题标记为正确

【解决方案2】：

这里是如何获取伪选择器的属性以及如何切换类的快速演示（使用伪选择器“影响”css规则的最佳方式）

let theStyle = window.getComputedStyle(document.querySelector('.exciting-text'), ':after')
console.log(theStyle.content)
console.log(theStyle.color)

setTimeout(function() {
document.querySelector('.exciting-text').classList.add('boring-text')
document.querySelector('.exciting-text').classList.remove('exciting-text')
}, 1500)

.exciting-text::after {
  content: " <- EXCITING!";
  color: green;
}

.boring-text::after {
  content: " <- BORING";
  color: red;
}

<p class="boring-text">Here is some plain old boring text.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

【讨论】：