Псевдоэлементы ::before и ::after вставляются в DOM в качестве теневых DOM-элементов. Псевдоэлемент ::before вставляется в качестве первого дочернего элемента своего родительского элемента, а ::after — в качестве его последнего дочернего элемента.
При использовании этих настроек CSS мы можем просмотреть DOM-дерево и увидеть псевдоэлемент ::after.
Рис. 11.7. Можно использовать псевдоэлементы для взаимодействия с кодом JavaScript
Потом это значение можно будет прочитать в коде JavaScript. Сначала присвоим значение переменной:
var size = window
.getComputedStyle(document.body, ':after')
.getPropertyValue('content');
Чтобы подтвердить концепцию, я создал простую самостоятельно вызываемую функцию (она выполняется сразу, как только браузер проведет ее синтаксический анализ), которая после загрузки страницы выводит в окне предупреждения разные сообщения в зависимости от размера окна просмотра:
var size = window
.getComputedStyle(document.body, ':after')
.getPropertyValue('content');
(function alertSize() {
if (size.indexOf('Splus') != -1) {
document.body.textContent =
size + ' I will run functions for small screens';
}
if (size.indexOf('Mplus') != -1) {
document.body.textContent =
size + ' Run a different function at medium sizes';
}
if (size.indexOf('Lplus') != -1) {
document.body.textContent =
size + ' I will run functions for LARGE screens';
}
})();
Итак, в зависимости от размера экрана, когда вы откроете этот пример, то увидите что-то вроде этого:
Рис. 11.8. JavaScript может считать значение из CSS-кода
Надеюсь, что в реальных проектах ваша фантазия пойдет дальше вывода предупреждения, и думаю, что из такого подхода к решению проблемы вы извлечете немалую пользу. И у вас никогда не возникнут опасения относительно рассогласованности медиазапросов CSS и зависимых от ширины окна просмотра функций JavaScript.
Можно также решить эту проблему с помощью пользовательских свойств CSS (глава 6), но я склонен придерживаться старого подхода, поскольку он по-прежнему хорошо работает в таких браузерах, как Internet Explorer 11.
При использовании этих настроек CSS мы можем просмотреть DOM-дерево и увидеть псевдоэлемент ::after.
Рис. 11.7. Можно использовать псевдоэлементы для взаимодействия с кодом JavaScript
Потом это значение можно будет прочитать в коде JavaScript. Сначала присвоим значение переменной:
var size = window
.getComputedStyle(document.body, ':after')
.getPropertyValue('content');
Чтобы подтвердить концепцию, я создал простую самостоятельно вызываемую функцию (она выполняется сразу, как только браузер проведет ее синтаксический анализ), которая после загрузки страницы выводит в окне предупреждения разные сообщения в зависимости от размера окна просмотра:
var size = window
.getComputedStyle(document.body, ':after')
.getPropertyValue('content');
(function alertSize() {
if (size.indexOf('Splus') != -1) {
document.body.textContent =
size + ' I will run functions for small screens';
}
if (size.indexOf('Mplus') != -1) {
document.body.textContent =
size + ' Run a different function at medium sizes';
}
if (size.indexOf('Lplus') != -1) {
document.body.textContent =
size + ' I will run functions for LARGE screens';
}
})();
Итак, в зависимости от размера экрана, когда вы откроете этот пример, то увидите что-то вроде этого:
Рис. 11.8. JavaScript может считать значение из CSS-кода
Надеюсь, что в реальных проектах ваша фантазия пойдет дальше вывода предупреждения, и думаю, что из такого подхода к решению проблемы вы извлечете немалую пользу. И у вас никогда не возникнут опасения относительно рассогласованности медиазапросов CSS и зависимых от ширины окна просмотра функций JavaScript.
Можно также решить эту проблему с помощью пользовательских свойств CSS (глава 6), но я склонен придерживаться старого подхода, поскольку он по-прежнему хорошо работает в таких браузерах, как Internet Explorer 11.
