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";
});
Методи
Властивості
borderImageOutset- Визначає відступ зображення рамки від країв елемента.
cursor- Змінює вигляд курсора під час наведення на елемент.
borderImageWidth- Встановлює джерело зображення для використання як межу елемента.
borderLeftWidth- Задає або змінює ширину лівої рамки елемента.
borderRightStyle- Задає стиль правої рамки елемента.
alignSelf- Вирівнює елемент у контейнері.
animationDuration- Встановлює або повертає тривалість анімації елемента.
animationTimingFunction- Визначає швидкість анімації елемента за допомогою функції часу.
backgroundClip- Визначає область, в межах якої відображається фонове зображення або колір елемента.
backgroundPosition- Встановлює або повертає позицію фону елемента.
borderTop- Встановлює або змінює стиль обведення верхньої межі елемента.
backgroundSize- Встановлює або отримує розмір фону елемента.
borderBottomColor- Змінює або встановлює колір нижньої рамки навколо HTML-елемента.
borderBottomWidth- Встановлює або змінює ширину нижньої рамки HTML-елемента.
borderTopStyle- Змінює або встановлює стиль верхнього краю рамки елемента.
boxSizing- Визначає, як враховуються відступи та рамки при обчисленні загальної ширини і висоти елемента.
clear- Встановлює чи змінює властивість очищення плаваючих елементів навколо елемента.
columnFill- Визначає, як вміст розподіляється між колонками багатоколонкового макету.
columnRuleStyle- Визначає стиль лінії, яка розділяє колонки у багатоколонковому макеті.
columnWidth- Встановлює ширину колонок у багатоколонковому макеті.
filter- Застосовує візуальні ефекти до елементів, такі як розмиття, яскравість або контраст.
flexFlow- Встановлює або повертає значення властивостей напрямку та обтікання flex-контейнера.
font- Встановлює всі шрифтові властивості елемента в один рядок.
fontVariant- Змінює вигляд тексту елементу, використовуючи різні варіанти шрифтів.
isolation- Задає режим ізоляції для запобігання змішуванню елементів із контекстом складання.
lineHeight- Задає або повертає висоту рядка тексту в межах елемента.
listStyleType- Визначає вигляд маркерів у списку, таких як круг, квадрат або число.
marginRight- Змінює відступ справа для вибраного HTML-елемента.
minHeight- Встановлює мінімальну висоту для вибраного HTML-елемента.
opacity- Встановлює прозорість HTML елемента.
overflow- Встановлює або повертає, як обробляти переповнення вмісту елемента в блоці.
outlineColor- Змінює колір рамки навколо HTML-елемента.
paddingBottom- Задає нижній внутрішній відступ для HTML-елемента.
pageBreakAfter- Встановлює чи відміняє розрив сторінки після певного елемента під час друку.
perspectiveOrigin- Визначає початкову точку перспективи для 3D-трансформацій відносно елемента.
counterIncrement- Збільшує значення лічильника елементу у CSS.
animation- Задає або повертає параметри анімації CSS для елемента.
animationFillMode- Визначає стан стилів елемента до і після анімації.
direction- Задає напрямок тексту в елементі: зліва направо або справа наліво.
animationPlayState- Керує відтворенням анімації, дозволяючи її призупиняти та відновлювати.
flex- Задає, як елемент буде рости або скорочуватися всередині контейнера flex.
backgroundColor- Встановлює або отримує колір фону елемента.
backgroundRepeat- Визначає, як фонове зображення буде повторюватися всередині елемента.
borderBottomLeftRadius- Встановлює або отримує радіус округлення нижнього лівого кута елемента.
borderCollapse- Встановлює або змінює спосіб відображення меж таблиці.
borderImageRepeat- Визначає спосіб повторення зображення рамки навколо елемента.
borderLeft- Встановлює або повертає стиль, ширину та колір лівої межі елемента.
borderRadius- Змінює або задає радіус закруглення кутів рамки елемента.
borderRightWidth- Задає ширину правої рамки елемента.
borderTopColor- Встановлює або змінює колір верхньої межі елемента.
borderTopWidth- Встановлює ширину верхнього кордону елемента.
captionSide- Встановлює розташування підпису таблиці відносно її тіла.
clip- Встановлює або змінює область, видиму вмісту елемента, обрізаючи його.
columnGap- Встановлює відстань між колонками у багатоколонковому макеті елемента.
flexGrow- Встановлює або повертає, як гнучкий елемент збільшується відносно інших.
columnRuleWidth- Встановлює ширину лінії, яка розділяє колонки у багатоколонковому макеті.
fontFamily- Задає або повертає сімейство шрифтів для тексту елемента.
fontWeight- Змінює товщину шрифту тексту елементу.
justifyContent- Вирівнює та розподіляє простір між або навколо вмісту контейнера по головній осі.
listStyle- Задає або повертає стиль маркерів у списках HTML-елемента.
margin- Встановлює або отримує відступи елемента від його зовнішніх меж.
marginTop- Змінює відступ зверху для вибраного HTML-елемента.
minWidth- Встановлює мінімальну ширину для вибраного HTML-елемента.
order- Встановлює порядок розташування гнучких елементів у контейнері flex.
outlineOffset- Змінює відстань між контуром елемента і його межами.
overflowX- Керує горизонтальним переповненням вмісту елемента.
paddingLeft- Задає лівий внутрішній відступ для HTML-елемента.
pageBreakBefore- Встановлює чи відміняє розрив сторінки перед певним елементом під час друку.
position- Встановлює або повертає тип позиціонування елемента на веб-сторінці.
borderImageSlice- Розрізає зображення рамки на частини для заповнення країв елемента.
borderLeftColor- Задає або змінює колір лівої рамки елемента.
borderRight- Задає стиль, ширину та колір правої рамки елемента.
alignContent- Встановлює або повертає вирівнювання елементів вздовж поперечної осі у flex-контейнері.
animationDelay- Встановлює або повертає затримку перед початком анімації елемента.
animationIterationCount- Визначає кількість циклів, протягом яких анімація повинна відтворюватися.
background- Встановлює або повертає значення фонового кольору або зображення для вказаного елемента.
backgroundImage- Встановлює або повертає зображення, що використовується як фонове для елемента.
border- Змінює або встановлює стиль рамки навколо HTML-елемента.
borderSpacing- Встановлює відстань між кордонами суміжних комірок у таблиці.
borderBottomRightRadius- Задає або змінює радіус закруглення нижнього правого кута елемента.
borderColor- Змінює колір рамки навколо HTML-елемента.
borderTopLeftRadius- Змінює або встановлює радіус закруглення верхнього лівого кута елемента.
borderWidth- Змінює ширину всіх чотирьох сторін кордону елемента.
caretColor- Встановлює колір текстового курсора в елементі.
color- Встановлює або змінює колір тексту всередині елемента.
columnRule- Встановлює стиль, товщину та колір лінії між колонками у багатоколонковому макеті.
columns- Розділяє контент на колонки для багатоколонкового макету.
fontSizeAdjust- Змінює розмір шрифту для покращення читабельності при різних типах шрифтів.
counterReset- Скидає значення лічильника елементу у CSS.
display- Змінює видимість HTML-елемента, вказуючи, чи він відображається на сторінці.
flexBasis- Встановлює або повертає початковий розмір гнучкого елемента в контейнері flex.
flexShrink- Визначає, наскільки елемент може зменшуватись відносно інших елементів у контейнері flexbox.
fontSize- Змінює розмір шрифту для конкретного HTML-елемента.
left- Встановлює або отримує значення відступу елемента від лівого краю контейнера.
listStyleImage- Задає зображення, яке використовується як маркер для елементів списку.
marginBottom- Встановлює або отримує нижній відступ елемента від його зовнішніх меж.
maxHeight- Встановлює максимальну висоту для вибраного HTML-елемента.
objectFit- Визначає, як вміст елемента змінює розмір та розташовується всередині контейнера.
orphans- Встановлює мінімальну кількість рядків тексту, які залишаються на сторінці при розбитті.
outlineStyle- Задає стиль рамки навколо HTML-елемента.
overflowY- Керує вертикальним переповненням вмісту елемента.
paddingRight- Задає правий внутрішній відступ для HTML-елемента.
pageBreakInside- Контролює, чи допускається розрив сторінки всередині певного елемента під час друку.
quotes- Встановлює або повертає стиль лапок для вбудованих цитат у елементі.
borderRightColor- Змінює колір правої рамки елемента.
borderStyle- Встановлює стиль рамки елемента.
alignItems- Вирівнює flex-елементи вздовж перпендикулярної до головної осі лінії всередині контейнера.
animationDirection- Встановлює або повертає напрямок виконання анімації CSS елемента.
animationName- Задає назву анімації, яка має бути застосована до елемента.
backgroundAttachment- Встановлює або повертає, чи фонове зображення елемента буде фіксованим або прокручуватиметься разом із вмістом.
backgroundOrigin- Визначає початкову точку відліку для позиціонування фонового зображення елемента.
borderBottom- Змінює або встановлює стиль нижньої рамки навколо HTML-елемента.
borderBottomStyle- Встановлює або змінює стиль нижньої рамки HTML-елемента.
borderImage- Встановлює зображення як рамку навколо HTML-елемента.
borderImageSource- Встановлює зображення для використання як рамки елемента.
borderLeftStyle- Задає або змінює стиль лівої рамки елемента.
borderTopRightRadius- Змінює або встановлює радіус закруглення верхнього правого кута елемента.
bottom- Задає відстань від нижнього краю елемента до нижнього краю його контейнера.
boxShadow- Задає тінь для рамки елемента.
columnCount- Встановлює або змінює кількість колонок для багатоколонкового макету елемента.
columnRuleColor- Встановлює колір лінії, що розділяє колонки у багатоколонковому макеті.
emptyCells- Відображає або приховує межі порожніх комірок у таблицях.
columnSpan- Об'єднує елемент на всі колонки у багатоколонковому макеті.
cssFloat- Вирівнює елемент за допомогою плаваючих властивостей CSS.
flexDirection- Визначає напрямок розташування гнучких елементів у контейнері Flexbox.
flexWrap- Контролює перенесення елементів у флекс-контейнері на новий рядок, якщо місця недостатньо.
fontStyle- Змінює стиль шрифту елемента на нормальний, курсивний або похилий.
height- Задає або змінює висоту елемента на вебсторінці.
letterSpacing- Змінює або отримує відстань між символами в тексті елемента.
listStylePosition- Визначає розташування маркерів списку відносно тексту елементів списку.
marginLeft- Змінює відступ зліва для вибраного HTML-елемента.
maxWidth- Встановлює максимальну ширину для вибраного HTML-елемента.
objectPosition- Визначає початкову позицію вмісту всередині контейнера.
outline- Встановлює обведення навколо елемента без впливу на розмір і положення.
outlineWidth- Задає товщину рамки навколо HTML-елемента.
padding- Задає внутрішні відступи для HTML-елемента.
paddingTop- Задає верхній внутрішній відступ для HTML-елемента.
perspective- Встановлює глибину перспективи 3D-простору для елемента, створюючи ефект тривимірності.