为什么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注入规则。 这不是小事，但有可能。

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

本文的一个稍微修改的示例

CCSOM参考