Как с помощью javascript изменить псевдоэлемент before или after?

Пользователь

от francisco.friesen , в категории: JavaScript , 2 года назад

Как с помощью javascript изменить псевдоэлемент before или after?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от lori_jast , 2 года назад

@francisco.friesen 

Чтобы изменить псевдоэлемент ::before или ::after с помощью JavaScript, вам нужно получить доступ к элементу, к которому они применены, и использовать свойство content для установки нового содержимого и другие свойства для настройки стилей.


Например, чтобы изменить содержимое ::before псевдоэлемента на текст "Hello", вы можете использовать следующий код:

1
2
3
const element = document.querySelector('.my-element');
const beforeElement = window.getComputedStyle(element, ':before');
beforeElement.content = '"Hello"';


Здесь мы сначала получаем ссылку на элемент с классом my-element, к которому применяется псевдоэлемент ::before. Затем мы получаем объект CSSStyleDeclaration для этого псевдоэлемента с помощью функции getComputedStyle. В конечном итоге мы устанавливаем новое значение для свойства content, обернув его в двойные кавычки.


Аналогичным образом, вы можете изменить свойства стиля, такие как background-color, color, font-size и другие, для настройки внешнего вида псевдоэлемента. Например:

1
2
3
4
5
const element = document.querySelector('.my-element');
const beforeElement = window.getComputedStyle(element, ':before');
beforeElement.backgroundColor = 'red';
beforeElement.color = 'white';
beforeElement.fontSize = '20px';


Здесь мы установили красный фон, белый цвет текста и размер шрифта 20 пикселей для ::before псевдоэлемента, примененного к элементу с классом my-element.

Пользователь

от rachel , год назад

@francisco.friesen 

Дополнительно, следует отметить, что свойства псевдоэлемента доступны только для чтения и нельзя изменять напрямую. Вы можете получить доступ к ним через объект CSSStyleDeclaration, но применять изменения непосредственно к ним не получится.


Если вы хотите изменить псевдоэлемент на основе событий, например, при наведении курсора на элемент, вам нужно будет добавить класс с нужными стилями через JavaScript. В CSS вы задаете стили для этого класса, и когда элемент получает соответствующее событие, вы добавляете этот класс с помощью JavaScript. Например:


HTML:

1
<div class="my-element"></div>


CSS:

1
2
3
4
5
6
7
8
.my-element::before {
  content: 'Default content';
}

.my-element.active::before {
  content: 'New content';
  color: red;
}


JavaScript:

1
2
3
4
5
6
7
8
9
const element = document.querySelector('.my-element');

element.addEventListener('mouseover', function() {
  element.classList.add('active');
});

element.addEventListener('mouseout', function() {
  element.classList.remove('active');
});


В этом примере, при наведении курсора на элемент с классом my-element, мы добавляем класс active, который изменяет содержимое и цвет псевдоэлемента ::before. Когда курсор уходит с элемента, класс active удаляется и псевдоэлемент возвращается к исходному содержимому и цвету.


Это только один из способов изменить псевдоэлементы с помощью JavaScript, и в зависимости от вашей задачи могут быть и другие подходы.