JS об'єкт CSSStyleDeclaration
Об'єкт CSSStyleDeclaration у JavaScript
Об'єкт CSSStyleDeclaration у JavaScript представляє собою інтерфейс для взаємодії з вбудованими стилями конкретного DOM-елемента. Цей об'єкт зазвичай отримується через властивість element.style, де element — це посилання на DOM-елемент. Через CSSStyleDeclaration можна читати, змінювати, додавати або видаляти стилі, присвоєні елементу.
Основи взаємодії з CSSStyleDeclaration
Зчитування стилю
Кожна CSS-властивість елемента може бути доступна як властивість об'єкта CSSStyleDeclaration. Наприклад, якщо ви хочете дізнатися значення властивості "color", ви можете зробити це так:
let elem = document.getElementById('myElement');
let colorValue = elem.style.color;
console.log(colorValue); // наприклад, "red" або "rgb(255, 0, 0)"
Зміна стилю
Щоб змінити стиль елемента, просто присвойте нове значення потрібній властивості:
elem.style.color = "blue";
Після виконання цього коду колір тексту елемента стане синім.
Додавання нового стилю
Добавлення нового стилю не відрізняється від зміни існуючого:
elem.style.fontSize = "20px";
Після цього розмір шрифта елемента стане 20 пікселів.
Особливості та рекомендації
CSS-властивості з дефісами
Якщо CSS-властивість містить дефіс, наприклад, background-color, то в JavaScript ви повинні перетворити її на camelCase стиль: backgroundColor:
elem.style.backgroundColor = "yellow";
Робота зі складними властивостями
Для властивостей, які можуть мати кілька значень, наприклад, border, ви повинні використовувати їх докладніший варіант:
elem.style.borderTopWidth = "5px";
elem.style.borderTopStyle = "solid";
elem.style.borderTopColor = "green";
Видалення стилю
Щоб видалити стиль, просто присвойте йому пусте значення:
elem.style.color = "";
Після цього властивість "color" буде видалена з вбудованого стилю елемента, і елемент буде використовувати значення з зовнішніх стилів або стилів за замовчуванням.
| Нотатка: | При роботі з назвами CSS-властивостей у JavaScript, завжди перетворюйте їх на camelCase. Тобто, замість "background-color" використовуйте |
| Нотатка: | Коли ви взаємодієте з властивістю |
| Нотатка: | Об'єкт |
| Нотатка: | Незважаючи на те, що об'єкт |
Синтаксис
const styleObj = document.styleSheets[0].cssRules[0].style;Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
0.10.0 |
1.0 |
Приклади
Ви хочете, щоб певний текст на вашій сторінці плавно з'являвся після завантаження сторінки. Ви можете використовувати CSSStyleDeclaration для динамічного додавання стилів, які роблять це можливим.
const textElement = document.querySelector("#fadeInText");
textElement.style.transition = "opacity 2s";
textElement.style.opacity = 0;
window.addEventListener("load", function() {
textElement.style.opacity = 1;
});
Ваша веб-сторінка може виглядати добре на десктопних екранах, але не оптимізована для мобільних пристроїв. Ви можете використовувати JavaScript для динамічної зміни стилів відповідно до розміру екрану.
У цьому прикладі, якщо ширина екрану менше 600 пікселів, головне меню приховується. Це допомагає забезпечити кращий досвід користувача на мобільних пристроях.
const nav = document.querySelector("#mainNav");
window.addEventListener("resize", function() {
if (window.innerWidth < 600) {
nav.style.display = "none";
} else {
nav.style.display = "block";
}
});
Допустимо, у вас є кнопка на веб-сторінці, яку користувач може натиснути для активації якогось процесу (наприклад, завантаження даних). При натисканні кнопки ви хочете змінити її кольоровий фон на зелений, показуючи, що дія була успішною.
const button = document.querySelector("#myButton");
button.addEventListener("click", function() {
button.style.backgroundColor = "green";
});