javascript - 更改:before and :after pseudo-elements?的样式

Question

<分区>

Answer 1

无法使用 Javascript 直接访问伪元素，因为它们不是 DOM 的一部分。您可以使用可选的第二个参数阅读他们的风格 - which most, although not all, browsers in current use support - 在 .getComputedStyle()但你不能直接改变他们的风格。

但是，您可以通过添加包含新规则的新 style 元素来间接更改它们的样式。例如:

http://jsfiddle.net/sjFML/

初始 CSS 为 :before 伪元素分配绿色背景，通过插入新的 style 元素将其变为黑色。

HTML:

<div id="theDiv"></div>

CSS:

#theDiv {
    height: 100px;
    background: red;
}

#theDiv:before {
    content:' ';
    display: block;
    width: 50px;
    height: 50px;
    background: green;
}

Javascript:

var styleElem = document.head.appendChild(document.createElement("style"));

styleElem.innerHTML = "#theDiv:before {background: black;}";