Задать вопрос
@hujak_hujak

Как обратиться к псевдоэлемунту after через js?

У меня есть див с псевдо элементом after, я хочу при нажатии на кнопку добавить ему свойство css, как это сделать?
  • Вопрос задан
  • 16796 просмотров
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 4
Defman21
@Defman21
Можно добавлять класс к самому диву.

.test {
  &:after { content: "hello"; }
  &.clicked:after { color: red; }
}


https://codepen.io/anon/pen/NRNbmp
Ответ написан
Комментировать
@MihailDonskoy
Кароч к самому псевдоэлементу нельза,но можно в элементе,где :after создать с помощью css свойства content: в котором создать селектор с помощью метода attr(data-название селектора ).то есть получиться например content:attr(data-el); а затем обратиться к нему из js var a = this.dataset.el,т таким макаром сможешь переопределить или добавить новые свойства элементу:after.только так.
Ответ написан
Комментировать
ShadXcoder
@ShadXcoder
мой способ это при нажатии на кнопку в элементе добавлять ему еще один класс и в css указать условие при котором твой псевдоэлемент будет изменяться как только присвоится второй класс и выполнится условие, на бумаге выглядит так:
*HTML*
div class="first"

*STYLE*
.first {
background: red
}
.first.second::after {
*тут стили*
}
*JS*
let div = document.querySelector(".first");
div.addEventListener('click', function () {
div.classlist.toggle("second");
}

способ с классами универсальный и решает множество проблем занимая меньше времени хоть и не выглядит современным чтоли
Ответ написан
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
К сожалению, обратиться к псевдоэлементу из js нельзя. Это Shadow DOM, он из js не виден.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
14 дек. 2024, в 22:57
3000 руб./за проект
14 дек. 2024, в 22:46
150000 руб./за проект
14 дек. 2024, в 22:43
2000 руб./за проект