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" використовуйте backgroundColor. Це дозволяє вам безпосередньо взаємодіяти з властивістю, не зіштовхуючись із проблемами синтаксису.

автор: Bond правити

Нотатка

Коли ви взаємодієте з властивістю element.style, ви отримуєте доступ тільки до вбудованих стилів цього елемента. Стилі, які застосовані через зовнішні CSS-файли або вбудовані стилі на рівні документа, не будуть видимі через CSSStyleDeclaration.

автор: Bond правити

Нотатка

Об'єкт CSSStyleDeclaration може бути корисним для дебагінгу та визначення стилів, які застосовані до конкретного елемента у реальний час. Це особливо корисно, коли ви намагаєтеся визначити, чому конкретний елемент виглядає не так, як ви очікували.

автор: Bond правити

Нотатка

Незважаючи на те, що об'єкт CSSStyleDeclaration дозволяє легко взаємодіяти зі стилями, рекомендується використовувати його обережно. Хоча можливість безпосередньо змінювати стилі елемента може здатися дуже зручною, часто краще додавати або видаляти класи з елемента. Це полегшує управління стилями, забезпечує більшу гнучкість та покращує продуктивність.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

const styleObj = document.styleSheets[0].cssRules[0].style;

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	12.1	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<button id="myButton">Натисни</button>

const button = document.querySelector("#myButton");
button.addEventListener("click", function() {
    button.style.backgroundColor = "green";
});

<div id="fadeInText">Демонстраційний елемент</div>

const textElement = document.querySelector("#fadeInText");
textElement.style.transition = "opacity 2s";
textElement.style.opacity = 0;

window.addEventListener("load", function() {
    textElement.style.opacity = 1;
});

<div id="mainNav">Демонстраційний елемент</div>

const nav = document.querySelector("#mainNav");
window.addEventListener("resize", function() {
    if (window.innerWidth < 600) {
        nav.style.display = "none";
    } else {
        nav.style.display = "block";
    }
});