Реально ли менять стили псевдоэлементов средствами js?

Question

[AdNahim]

Недавно открыл для себя прекрасный метод getComputedStyle. По названию правда уже понятно, что ничего кроме как get из него не выжать, но может имеются интересные варианты решения моего вопроса?

Имею такие стили у :before элемента:

.el:before {
  color: green;
}

При помощи getComputedStyle прекрасно вытащил color у псевдоэлемента :before

var color = window.getComputedStyle(
	document.querySelector('.el'), ':before'
).getPropertyValue('color');

На выходе: rgb(0, 128, 0)

Очень захотелось его изменить на своё значение, но, ничего толкового из этого не вышло.

Буду благодарен за идеи.
Спасибо.

Answer 1

[Pavel Torbeev]

Сделайте просто два стиля

.el:before {
content: 'text';
}
.green:before {
color: green;
}
.red:before {
color:red
}

<div class="el"></div>
А с помощью js уже меняйте классы green и red

Comments

[AdNahim]

Видимо да. Остаётся такой вариант.

Answer 2

[riot26]

No you can't do that. The :before and :after pseudo-elements are not available in any way to your Javascript code.

подробнее

Comments

[AdNahim]

кстати в ответе, копией которого является ответ по Вашей ссылке имеется неплохое решение с data-* атрибутами. Правда оно как я понял только на content распространяется.

Answer 3

[Дмитрий Кравченко]

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