Вступ.
Сьогодні ми познайомимося з можливістю оформлення семантичних блоків веб сторінки за допомогою JavaScript, використовуючи методи з DOM API.
Зазвичай використовують CSS властивості селекторів для стилізації елементів на сторінці, оскільки це дає можливість розмістити всі правила стилів в одному місці і легко змінювати їх, не залежно від того, яких елементів вони стосуються.
Ми вже вміємо створювати оформлення сторінок за допомогою CSS, але судячи з вашого нестримного та жагучого бажання скоріше почати писати JavaScript код, я вирішив таки познайомити вас з деякими можливостями JavaScript у плані оформлення елементів веб сторінок. Для тих, кому ця тема буде складною, або хто має намір залишити право на оформлення веб сторінок за CSS можу запропонувати відкласти на майбутній період ознайомлення з цією темою.
Сьогодні спробую звести всі визначення до мінімуму і спробуємо розібратися з нашою темою за допомогою прикладів, які ми використаємо відразу для практичного завдання - перенесення цих прикладів у ваш реальний проект сайту. Цей навчальний матеріал призначений для молодшої групи майбутніх веб розробників, тому будуть наведені приклади майже до кожного семантичного блоку веб сторінки. Отже переходимо до справи.
Порівняння використання атрибутів властивостей style DOM-елементів в JavaScript та CSS властивостей селектора з точки зору швидкості та продуктивності.
Використання атрибутів властивостей стилів DOM-елементів в JavaScript може бути корисним у випадках, коли потрібно динамічно змінювати стиль елементів на сторінці.
Щодо швидкості, то застосування CSS властивостей селекторів є більш ефективним способом з точки зору продуктивності. Це через те, що браузери оптимізовані для обробки CSS стилів і вони можуть швидко виконувати відповідні правила на основі властивостей елемента та його позиції у дереві документа.
У той же час, зміна атрибутів властивостей стилів DOM-елементів в JavaScript може призвести до перерозрахунку розмірів та позицій інших елементів на сторінці, що може призвести до зниження продуктивності.
Отже, якщо потрібно динамічно змінювати стиль елементів на сторінці, використання атрибутів властивостей стилів DOM-елементів в JavaScript є відповідним рішенням. У всіх інших випадках, використання CSS властивостей селекторів є більш продуктивним способом.
Приклади оформлення семантичних блоків за допомогою JavaScript.
Перед тим, як почати розглядати приклади, нам потрібно познайомитися з одним цікавим методом JavaScript, який називається document.querySelector().
Метод document.querySelector().
document.querySelector() - це метод JavaScript, який дозволяє отримати посилання на перший елемент, що відповідає заданому CSS-селектору на сторінці. Він є частиною DOM API і доступний у всіх сучасних браузерах.
Синтаксис document.querySelector() виглядає наступним чином:
const element = document.querySelector(selector);
де selector - це CSS-селектор, за допомогою якого визначається, який елемент необхідно знайти.
Якщо на сторінці присутні декілька елементів, що відповідають заданому селектору, то document.querySelector() поверне посилання на перший з них. Якщо ж жоден елемент не відповідає селектору, метод поверне значення null.
Наприклад, якщо на сторінці є елемент з ідентифікатором my-element, то ми можемо отримати посилання на нього, використовуючи наступний код:
const myElement = document.querySelector('#my-element');
У цьому прикладі, #my-element - це CSS-селектор, який вибирає елемент з ідентифікатором my-element.
Наприклад, якщо на сторінці є елемент з класом my-element, то ми можемо отримати посилання на нього, використовуючи наступний код:
const myElement = document.querySelector('.my-element');
У цьому прикладі, .my-element - це CSS-селектор, який вибирає елементи з класом my-element. Зверніть увагу, що метод document.querySelector() поверне лише перший елемент, який відповідає заданому CSS-селектору. Якщо на сторінці присутні декілька елементів з таким класом, то буде повернено посилання лише на перший з них.
Якщо на сторінці присутній елемент з класом my-element, то ми можемо отримати посилання на нього за допомогою методу document.querySelector(), передавши до нього CSS-селектор .my-element. Зверніть увагу, що для вибору елементів за класом, ми використовуємо крапку перед назвою класу у CSS-селекторі, тому що це є синтаксисом CSS для вибору елементів за класом.
Оформлення семантичного блоку header за допомогою JavaScript без додавання класу.
Оформлення семантичного блоку header можна здійснити за допомогою JavaScript, використовуючи методи з DOM API. Наприклад, можна змінити його фоновий колір, розміри або шрифт.
Приклад коду, який змінює фоновий колір блоку header на зелений, шрифт на Arial та розміри тексту на 20px:
// знайти блок header
const header = document.querySelector('header');
// змінити фоновий колір, шрифт і розміри тексту
header.style.backgroundColor = 'green';
header.style.fontFamily = 'Arial';
header.style.fontSize = '20px';
У цьому прикладі ми знаходимо блок header за допомогою методу querySelector(). Потім ми встановлюємо його фоновий колір, шрифт та розміри тексту за допомогою властивостей backgroundColor, fontFamily та fontSize DOM-елемента.
Оформлення семантичного блоку nav за допомогою CSS стилів для селектора nav або JavaScript без додавання класу.
Можна оформити семантичний блок nav без додавання класу, використовуючи написання CSS стилів для селектора nav. Проте, якщо потрібно змінити стиль nav динамічно, за допомогою JavaScript, то все одно потрібно отримати доступ до елементу nav за допомогою querySelector().
Приклад:
Наприклад, допустимо, що ми маємо такий HTML код:
<nav>
<ul>
<li><a href="#">Головна</a></li>
<li><a href="#">Про нас</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</nav>Для того, щоб стилізувати цей блок, можна написати CSS стилі для селектора nav:
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
Або можна використовувати JavaScript для зміни стилів:
const nav = document.querySelector('nav');
nav.style.backgroundColor = '#333';// змінюємо колір фону на темно-сірий
nav.style.color = '#fff';// змінюємо колір тексту на білий
nav.style.padding = '10px';// задаємо відступи внутрішнього контенту
Таким чином, з'явиться темний фон, білі літери та внутрішній відступ 10px у nav.
Оформлення семантичного блоку main за допомогою JavaScript без додавання класу.
Приклад коду, який змінює фоновий колір блоку main на блакитний, шрифт на Helvetica Neue та розміри тексту на 18px:
// знайти блок main
const main = document.querySelector('main');
// змінити фоновий колір, шрифт і розміри тексту
main.style.backgroundColor = 'blue';
main.style.fontFamily = 'Helvetica Neue';
main.style.fontSize = '18px';
У цьому прикладі ми знаходимо блок main за допомогою методу querySelector(). Потім ми встановлюємо його фоновий колір, шрифт та розміри тексту за допомогою властивостей backgroundColor, fontFamily та fontSize DOM-елемента.
Оформлення семантичного блоку section за допомогою JavaScript без додавання класу.
Якщо потрібно змінити стиль section динамічно, за допомогою JavaScript, потрібно отримати доступ до елементу section за допомогою querySelector().
Приклад використання JavaScript для зміни стилів семантичного блоку section:
const section = document.querySelector('section');
section.style.backgroundColor = '#f9f9f9';//блідий фон
section.style.border = '1px solid #ddd';//рамка
section.style.padding = '10px';//внутрішній відступТаким чином, у семантичного блоку section з'явиться блідий фон, рамка та внутрішній відступ.
Оформлення семантичного блоку article за допомогою JavaScript без додавання класу.
Якщо нам потрібно змінити стиль article динамічно, за допомогою JavaScript, то потрібно отримати доступ до елементу article за допомогою querySelector()
Приклад використання JavaScript для зміни стилів семантичного блоку article:
const article = document.querySelector('article');
article.style.backgroundColor = '#f9f9f9';
article.style.border = '1px solid #ddd';
article.style.padding = '10px';
У семантичного блоку article з'явиться блідий фон, рамка та внутрішній відступ на article.
Оформлення семантичного блоку aside за допомогою JavaScript без додавання класу.
Якщо потрібно змінити стиль aside динамічно, за допомогою JavaScript, то нам потрібно отримати доступ до елементу aside за допомогою querySelector().
Приклад використання JavaScript для зміни стилів семантичного блоку aside:
const aside = document.querySelector('aside');
aside.style.float = 'right';
aside.style.width = '30%';
aside.style.marginLeft = '10px';
aside.style.backgroundColor = '#f9f9f9';
aside.style.border = '1px solid #ddd';
aside.style.padding = '10px';
У семантичного блоку aside з'явиться блідий фон, рамка, внутрішній відступ та бічне розташування.
Оформлення семантичного блоку footer за допомогою JavaScript без додавання класу.
Приклад використання JavaScript для зміни стилів семантичного блоку footer:
const footer = document.querySelector('footer'); // отримуємо посилання на елемент footer
footer.style.backgroundColor = '#333'; // змінюємо колір фону на темно-сірий
footer.style.color = '#fff'; // змінюємо колір тексту на білий
footer.style.padding = '20px'; // задаємо відступи внутрішнього контенту
footer.style.textAlign = 'center'; // вирівнюємо текст по центру
У цьому прикладі ми спочатку отримали посилання на елемент footer за допомогою методу document.querySelector(), передавши до нього тег footer. Далі, ми використали властивості CSS, щоб задати стилі для елемента. Зміни, які ми внесли до елемента footer, включають зміну колору фону на темно-сірий (backgroundColor), зміну колору тексту на білий (color), задання відступів внутрішнього контенту (padding) та вирівнювання тексту по центру (textAlign).
Цей підхід можна застосовувати і до інших семантичних блоків, якщо не потрібно додавати до них нових класів. Використання властивостей CSS за допомогою JavaScript може бути корисним, якщо потрібно виконати невеликі зміни стилів для окремих елементів без додавання великої кількості CSS-коду.
Використані джерела:
- https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
- https://www.w3schools.com/jsref/met_document_queryselector.asp
- https://www.javascripttutorial.net/javascript-dom/javascript-queryselector/
З повагою, Юрій Чернієвський! Керівник гуртка "WEB-Miditaur" науково – технічного напряму «WEB технології» ЦДЮТ Краснопільської селищної ради. Бакалавр, прикладна математика за спеціальним напрямом інформатика, Спеціаліст - інформатика, математик - програміст.
0 Коментарів Підписатися на цей блог