Почему это документ.querySelector не работает на псевдо элементе?

Question

Почему это документ.querySelector не работает на псевдо элементе?

Я играю с псевдоэлементами и 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>

Не кто-нибудь знает почему это не работает?

544 1

javascript css3 html5

1 ответ:

Comments

Ничего не найдено.

Winchestro · Accepted Answer · 2014-09-29 12:10:12

Если вы хотите стилизовать псевдо-элементы из javascript, вы должны использовать CSSOM для введения правил. Это не тривиально, но возможно.
var sheet = document.styleSheets[0]; //get style sheet somehow
var rules = sheet.rules; 
sheet.insertRule('div:before { display: none; }', rules.length);
Немного измененный пример из этой статьи

Ссылка CCSOM