Получить псевдоэлементы с помощью Javascript

Псевдоэлементы CSS невероятно полезны - они позволяют нам выполнять ряд других простых задач, предотвращая при этом необходимость в дополнительных элементах HTML. До сих пор эти свойства CSS псевдоэлементов были недоступны для JavaScript, но теперь есть способ их получить!

Предположим, ваш CSS выглядит так:

.element:before {
	content: 'NEW';
	color: rgb(255, 0, 0);
}

Чтобы получить свойство цвета .element:before, вы можете использовать следующий код JavaScript:

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

Передача псевдоэлемента в качестве второго аргумента window.getComputedStyle позволяет получить доступ к указанным стилям псевдоэлементов! Храните этот фрагмент в своем наборе инструментов на долгие годы - псевдоэлементы станут только более полезными с расширенной поддержкой браузеров!

Теперь для людей вроде меня, которые обязывают проводить модульные тесты для всего. Я использую транспортир какое-то время, и это УДИВИТЕЛЬНО !. Я могу делать забавные вещи, например проверять псевдоэлементы для свойств CSS :: after и :: before.

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

expect(browser.executeScript("return window.getComputedStyle(document.querySelector('.fs-headline.fs-responsive-text>span'), ':after').getPropertyValue('color')")).toEqual('rgb(196, 26, 35)');

Не чтобы быть придирчивым, но убедитесь, что вы преобразовали rgba в соответствующее ему HEX-значение при перекрестной проверке.

#keepcodingcoolstuff