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