Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

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

Нотатка:

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

Нотатка:

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

Нотатка:

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

Синтаксис

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
Визначає відступ зображення рамки від країв елемента.
borderImageWidth
Встановлює джерело зображення для використання як межу елемента.
borderLeftWidth
Задає або змінює ширину лівої рамки елемента.
borderRightStyle
Задає стиль правої рамки елемента.
alignSelf
Вирівнює елемент у контейнері.
animationDuration
Встановлює або повертає тривалість анімації елемента.
animationTimingFunction
Визначає швидкість анімації елемента за допомогою функції часу.
backgroundClip
Визначає область, в межах якої відображається фонове зображення або колір елемента.
backgroundPosition
Встановлює або повертає позицію фону елемента.
borderTop
Встановлює або змінює стиль обведення верхньої межі елемента.
backgroundSize
Встановлює або отримує розмір фону елемента.
borderBottomColor
Змінює або встановлює колір нижньої рамки навколо HTML-елемента.
borderBottomWidth
Встановлює або змінює ширину нижньої рамки HTML-елемента.
borderTopStyle
Змінює або встановлює стиль верхнього краю рамки елемента.
animation
Задає або повертає параметри анімації CSS для елемента.
animationFillMode
Визначає стан стилів елемента до і після анімації.
animationPlayState
Керує відтворенням анімації, дозволяючи її призупиняти та відновлювати.
backgroundColor
Встановлює або отримує колір фону елемента.
backgroundRepeat
Визначає, як фонове зображення буде повторюватися всередині елемента.
borderBottomLeftRadius
Встановлює або отримує радіус округлення нижнього лівого кута елемента.
borderCollapse
Встановлює або змінює спосіб відображення меж таблиці.
borderImageRepeat
Визначає спосіб повторення зображення рамки навколо елемента.
borderLeft
Встановлює або повертає стиль, ширину та колір лівої межі елемента.
borderRadius
Змінює або задає радіус закруглення кутів рамки елемента.
borderRightWidth
Задає ширину правої рамки елемента.
borderTopColor
Встановлює або змінює колір верхньої межі елемента.
borderTopWidth
Встановлює ширину верхнього кордону елемента.
borderImageSlice
Розрізає зображення рамки на частини для заповнення країв елемента.
borderLeftColor
Задає або змінює колір лівої рамки елемента.
borderRight
Задає стиль, ширину та колір правої рамки елемента.
alignContent
Встановлює або повертає вирівнювання елементів вздовж поперечної осі у flex-контейнері.
animationDelay
Встановлює або повертає затримку перед початком анімації елемента.
animationIterationCount
Визначає кількість циклів, протягом яких анімація повинна відтворюватися.
background
Встановлює або повертає значення фонового кольору або зображення для вказаного елемента.
backgroundImage
Встановлює або повертає зображення, що використовується як фонове для елемента.
border
Змінює або встановлює стиль рамки навколо HTML-елемента.
borderSpacing
Встановлює відстань між кордонами суміжних комірок у таблиці.
borderBottomRightRadius
Задає або змінює радіус закруглення нижнього правого кута елемента.
borderColor
Змінює колір рамки навколо HTML-елемента.
borderTopLeftRadius
Змінює або встановлює радіус закруглення верхнього лівого кута елемента.
borderRightColor
Змінює колір правої рамки елемента.
borderStyle
Встановлює стиль рамки елемента.
alignItems
Вирівнює flex-елементи вздовж перпендикулярної до головної осі лінії всередині контейнера.
animationDirection
Встановлює або повертає напрямок виконання анімації CSS елемента.
animationName
Задає назву анімації, яка має бути застосована до елемента.
backgroundAttachment
Встановлює або повертає, чи фонове зображення елемента буде фіксованим або прокручуватиметься разом із вмістом.
backgroundOrigin
Визначає початкову точку відліку для позиціонування фонового зображення елемента.
borderBottom
Змінює або встановлює стиль нижньої рамки навколо HTML-елемента.
borderBottomStyle
Встановлює або змінює стиль нижньої рамки HTML-елемента.
borderImage
Встановлює зображення як рамку навколо HTML-елемента.
borderImageSource
Встановлює зображення для використання як рамки елемента.
borderLeftStyle
Задає або змінює стиль лівої рамки елемента.
borderTopRightRadius
Змінює або встановлює радіус закруглення верхнього правого кута елемента.