Как получить псевдоэлемент в JS?

Question

[Алексей]

Как можно получить доступ к псевдоэлементу в JavaScript ? Его нет в DOM - получается, что никак. Но очень нужно, структуру документа менять не могу. Нужен какой-то костыль.

Comments

[Rustam Bainazarov]

Если нужно текст менять, то можно через атрибут (подробнее).

Если ещё и стили нужно задать, то только через класс или с помощью CSS-переменных.

Напрямую — никак.

Answer 1

[WapSter]

Нет из js никак не получить псевдоэлемент :before и :after. Но можно менять класс их родителю и в зависимости от этого класса изменять стили псевдоэлементов.

Comments

[Алексей]

да! точно! спасибо! блин, а я голову сломал - все ж просто!

Answer 2

[origami1024]

Зависит что с ним нужно делать, если содержимое менять, то можно через css переменную его задать. Саму переменную можно менять через js

Answer 3

[Prukdyi]

let element = document.querySelector(".test");
let elementStyle = getComputedStyle(element, "::before")
console.log(elementStyle.backgroundColor);

Замечу что можно только получить значение пневмоэлементов, менять из значения к сожалению нельзя. Но так как вы знаете их свойства, то уже далее можно думать.

Answer 4

[robothot]

Можно найти элемент через обращение к document.styleSheets[0].cssRules
Найти нужный элемент, сравнить с искомым и присвоить какой нибудь перемнной, а потом так же обращаться и менять стили
Что то вроде:

for (let i = 0; i < document.styleSheets[0].cssRules.length; i++) {
    if (document.styleSheets[0].cssRules[i].selectorText === `.${class}::after`) {
        let icon = document.styleSheets[0].cssRules[i];
        break
    }
}
icon.style.opacity = '1'