Пошук уроків, статей та іншого контенту
Застосовуватимете CSS-класи та inline-стилі для динамічної зміни вигляду сторінки.
JavaScript може змінювати вигляд елементів сторінки після завантаження або у відповідь на дії користувача. Найзручніший спосіб — додавати й видаляти CSS-класи.
Наприклад, у HTML є кнопка:
<button class="button">Зберегти</button>CSS описує її стандартний вигляд:
.button {
background-color: #2563eb;
color: white;
border: none;
padding: 10px 16px;
border-radius: 6px;
}Щоб додати до кнопки інший вигляд, створимо окремий клас:
.button--disabled {
opacity: 0.5;
cursor: not-allowed;
}Тепер JavaScript може керувати класом button--disabled.
classListВластивість classList містить усі CSS-класи елемента та має методи для роботи з ними.
add()Метод add() додає один або кілька класів:
const button = document.querySelector(".button");
button.classList.add("button--disabled");Після виконання клас кнопки виглядатиме так:
<button class="button button--disabled">Зберегти</button>Можна додати кілька класів одночасно:
button.classList.add("button--disabled", "button--large");remove()Метод remove() видаляє класи:
button.classList.remove("button--disabled");Якщо такого класу немає, помилки не виникне.
toggle()Метод toggle() додає клас, якщо його немає, і видаляє, якщо він уже є.
button.classList.toggle("button--disabled");Це зручно для перемикання станів:
відкрити або закрити меню;
увімкнути або вимкнути темну тему;
показати або приховати повідомлення;
активувати або деактивувати кнопку.
contains()Метод contains() перевіряє, чи має елемент певний клас. Результат — true або false.
const isDisabled = button.classList.contains("button--disabled");
console.log(isDisabled);replace()Метод replace() замінює один клас іншим:
button.classList.replace("button--disabled", "button--active");Якщо першого класу немає, заміна не відбудеться.
Створимо кнопку, яка перемикає клас is-active.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Перемикання класу</title>
<style>
.button {
padding: 10px 16px;
border: none;
border-radius: 6px;
background-color: #d1d5db;
color: #111827;
cursor: pointer;
}
.button.is-active {
background-color: #16a34a;
color: white;
}
</style>
</head>
<body>
<button class="button">Увімкнути</button>
<script>
const button = document.querySelector(".button");
button.addEventListener("click", () => {
const isActive = button.classList.toggle("is-active");
button.textContent = isActive ? "Вимкнути" : "Увімкнути";
});
</script>
</body>
</html>Після натискання:
клас is-active додається або видаляється;
CSS змінює колір кнопки;
текст кнопки оновлюється.
Зверніть увагу на результат toggle(). Він повертає true, якщо клас було додано, і false, якщо клас було видалено.
Inline-стиль — це стиль, записаний безпосередньо в атрибуті style HTML-елемента:
<p style="color: red;">Текст</p>У JavaScript inline-стилями можна керувати через властивість style.
const paragraph = document.querySelector("p");
paragraph.style.color = "blue";
paragraph.style.fontSize = "20px";Після виконання JavaScript елемент матиме приблизно такий вигляд:
<p style="color: blue; font-size: 20px;">Текст</p>У CSS властивості записуються через дефіс:
background-color: yellow;
font-size: 20px;
margin-top: 10px;У JavaScript використовується стиль camelCase:
element.style.backgroundColor = "yellow";
element.style.fontSize = "20px";
element.style.marginTop = "10px";Інші приклади:
element.style.color = "darkblue";
element.style.borderRadius = "8px";
element.style.padding = "12px";
element.style.display = "none";Щоб скинути конкретний inline-стиль, присвойте йому порожній рядок:
element.style.color = "";Щоб повністю очистити атрибут style:
element.style.cssText = "";Зазвичай краще очищати лише потрібну властивість, а не весь атрибут.
У більшості випадків для повторюваних станів варто використовувати CSS-класи:
element.classList.add("is-hidden");.is-hidden {
display: none;
}Inline-стилі зручні, коли значення обчислюється під час виконання програми:
const progress = 65;
progressBar.style.width = `${progress}%`;Наприклад, ширина індикатора прогресу може змінюватися залежно від числа. Для такого значення не обов’язково створювати окремий CSS-клас для кожного відсотка.
Загальне правило:
CSS-класи — для станів і заздалегідь описаних наборів стилів;
inline-стилі — для динамічних значень, які обчислює JavaScript.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Повідомлення</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 24px;
}
.message {
max-width: 320px;
margin-top: 16px;
padding: 12px;
border-radius: 6px;
background-color: #dcfce7;
color: #166534;
}
.is-hidden {
display: none;
}
.button {
padding: 10px 16px;
border: none;
border-radius: 6px;
background-color: #2563eb;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<button class="button" type="button">Показати повідомлення</button>
<p class="message is-hidden">
Дані успішно збережено.
</p>
<script>
const button = document.querySelector(".button");
const message = document.querySelector(".message");
button.addEventListener("click", () => {
const isHidden = message.classList.toggle("is-hidden");
button.textContent = isHidden
? "Показати повідомлення"
: "Приховати повідомлення";
});
</script>
</body>
</html>Клас is-hidden відповідає лише за приховування елемента. JavaScript не змінює всі стилі вручну, а лише перемикає стан.
Розглянемо індикатор прогресу. Його ширина залежить від змінної progress.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Індикатор прогресу</title>
<style>
.progress {
width: 300px;
height: 24px;
border-radius: 12px;
background-color: #e5e7eb;
overflow: hidden;
}
.progress__bar {
height: 100%;
background-color: #22c55e;
transition: width 300ms ease;
}
</style>
</head>
<body>
<div class="progress" aria-label="Прогрес виконання">
<div class="progress__bar"></div>
</div>
<script>
const progressBar = document.querySelector(".progress__bar");
const progress = 65;
progressBar.style.width = `${progress}%`;
</script>
</body>
</html>Значення ${progress}% перетворюється на рядок "65%". Саме так JavaScript задає ширину внутрішнього елемента.
Метод querySelectorAll() повертає колекцію всіх елементів, які відповідають CSS-селектору. Щоб змінити кожен елемент, використовуйте forEach().
<ul>
<li class="item">HTML</li>
<li class="item">CSS</li>
<li class="item">JavaScript</li>
</ul>
<script>
const items = document.querySelectorAll(".item");
items.forEach((item) => {
item.classList.add("is-selected");
});
</script>Якщо клас описаний у CSS, усі три елементи отримають відповідний вигляд.
.is-selected {
color: #2563eb;
font-weight: bold;
}Властивість element.style містить лише inline-стилі, задані безпосередньо через атрибут style або JavaScript.
const element = document.querySelector(".message");
element.style.color = "red";
console.log(element.style.color);Щоб отримати фактичний стиль, який застосовується з урахуванням CSS-файлів і класів, використовуйте getComputedStyle():
const element = document.querySelector(".message");
const styles = getComputedStyle(element);
console.log(styles.color);
console.log(styles.display);Метод повертає обчислені стилі, але зазвичай їх не потрібно змінювати. Для зміни вигляду краще використовувати classList або style.
Для інтерактивного елемента часто використовують такий порядок:
Отримати елемент через querySelector().
Додати обробник події.
Змінити клас через classList.
За потреби змінити текст або inline-стиль.
const card = document.querySelector(".card");
const button = document.querySelector(".card__button");
button.addEventListener("click", () => {
card.classList.toggle("card--expanded");
});CSS визначає, як виглядатиме картка у звичайному та розгорнутому стані:
.card {
max-height: 100px;
overflow: hidden;
}
.card.card--expanded {
max-height: none;
}Такий підхід розділяє відповідальність:
CSS описує вигляд;
JavaScript керує станом;
HTML містить структуру сторінки.
У JavaScript не можна записати CSS-властивість із дефісом у звичайному вигляді:
element.style.background-color = "red";Це синтаксично некоректно. Використовуйте camelCase:
element.style.backgroundColor = "red";Для багатьох CSS-властивостей потрібні одиниці:
element.style.width = "200px";
element.style.marginTop = "16px";Такий запис може не спрацювати очікуваним чином:
element.style.width = "200";Для властивостей без одиниць, наприклад opacity, одиниці не потрібні:
element.style.opacity = "0.5";classNameВластивість className повністю замінює рядок класів:
element.className = "active";Якщо елемент мав інші класи, вони будуть видалені. Безпечніше додавати окремий клас:
element.classList.add("active");Перевірте, що елемент знайдено:
const button = document.querySelector(".button");
if (button) {
button.classList.add("active");
}Якщо селектор не відповідає жодному елементу, querySelector() поверне null, а виклик classList у такого значення спричинить помилку.
Клас у селекторі має починатися з крапки:
document.querySelector(".button");Селектор без крапки шукає HTML-елемент із таким ім’ям:
document.querySelector("button");Обидва варіанти можуть бути правильними, але вони шукають різні речі.
element.classList.add() додає CSS-клас.
element.classList.remove() видаляє CSS-клас.
element.classList.toggle() перемикає клас.
element.classList.contains() перевіряє наявність класу.
element.classList.replace() замінює один клас іншим.
element.style змінює inline-стилі.
CSS-властивості з дефісами в JavaScript записуються в camelCase.
Для станів елемента зазвичай краще використовувати CSS-класи.
Inline-стилі зручні для динамічних значень, наприклад ширини індикатора прогресу.
JavaScript керує станом, а CSS описує зовнішній вигляд.