javascript - 为什么 document.querySelector 不适用于伪元素？

Question

我正在玩伪元素和 javascript，但有些我无法使用 javascript 设置样式。

    var div = document.querySelector(":before");
    div.style["display"] ="none";

div{
    width:200px;
    height:200px;
    background:red;
    position:relative;
}

div:before{
    position:absolute;
    content:'';
    top:0;
    right:-100px;
    width:100px;
    height:100%;
    background:green;
}

<div></div>

有谁知道为什么这不起作用？

Answer 1

如果你想从 javascript 中设置伪元素的样式，你必须使用 CSSOM 来注入(inject)规则。这不是微不足道的，但它是可能的。

var sheet = document.styleSheets[0]; //get style sheet somehow
var rules = sheet.rules; 
sheet.insertRule('div:before { display: none; }', rules.length);

a slightly modified example from this article

CCSOM Reference