为什么document.querySelector在伪元素上不起作用? [英] Why is document.querySelector not working on pseudo element?

问题描述

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

I am playing with pseudo elements and javascript but some how i can not style it using 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>

有人知道为什么这不起作用吗?

do anyone knows why this is not working?

推荐答案

如果要从javascript设置伪元素样式，则必须使用CSSOM注入规则.这不是小事，但有可能.

If you want to style pseudo elements from javascript you have to use the CSSOM to inject the rules. It's not trivial, but it's possible.

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

对本文进行了稍微修改的示例

CCSOM参考

这篇关于为什么document.querySelector在伪元素上不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！