Зміна Стилів Елементів за Допомогою JavaScript

У веб-розробці часто виникає необхідність динамічно змінювати стилі елементів. JavaScript надає два основних способи зміни зовнішнього вигляду елементів: оновлення інлайнових стилів за допомогою властивості style та керування класами через classList.

Зміна інлайнових стилів за допомогою властивості style

Властивість style у JavaScript дозволяє безпосередньо змінювати інлайновий CSS HTML-елемента. Цей метод надає повний контроль над окремими CSS-властивостями, але обмежується лише інлайновими стилями та впливає тільки на конкретний елемент.

Можна змінювати окремі CSS-властивості, використовуючи нотацію через крапку для об'єкта style елемента. Назви властивостей записуються у camelCase (наприклад, backgroundColor замість background-color).

index.html

index.css

index.js

Властивість style використовується для зміни inline-стилів елемента #box. Кожна CSS-властивість доступна як окрема властивість JavaScript (наприклад, box.style.backgroundColor), що дозволяє динамічно змінювати окремі аспекти стилю елемента.

Додавання та видалення CSS-класів за допомогою classList

Властивість classList забезпечує більш гнучкий і потужний спосіб керування стилями елемента шляхом додавання, видалення або перемикання CSS-класів. Цей метод є більш підтримуваним, ніж безпосередня зміна inline-стилів, оскільки дозволяє використовувати зовнішні CSS-файли та відокремлювати стилізацію від логіки JavaScript.

index.html

index.css

index.js

classList.toggle() використовується для додавання або видалення класу highlight при натисканні кнопки. Цей метод дозволяє уникнути перевантаження атрибута style та спирається на заздалегідь визначені CSS-правила для кращої підтримуваності.

Практичний приклад: Перемикання теми

Розглянемо практичний приклад, де користувач може перемикатися між світлою та темною темою за допомогою classList.

index.html

index.css

index.js

classList.replace() використовується для заміни класів light-theme та dark-theme залежно від поточного стану.

1. Яка властивість використовується для зміни inline-стилів елемента?

2. Як змінити колір фону `<div>` з ідентифікатором `box` на coral за допомогою JavaScript?

3. Що виконує наступний код?

Яка властивість використовується для зміни inline-стилів елемента?

Select the correct answer

style

classList

getComputedStyle()

Як змінити колір фону <div> з ідентифікатором box на coral за допомогою JavaScript?

Select the correct answer

document.getElementById('box').classList.add('coral');

document.getElementById('box').style.color = 'coral';

document.getElementById('box').style.backgroundColor = 'coral';

document.getElementById('box').setAttribute('backgroundColor', 'coral');

Що виконує наступний код?

Select the correct answer

Додає клас active, якщо його немає; видаляє, якщо він вже є.

Встановлює клас active як inline-стиль для кнопки.

Лише додає клас active без його видалення.

Змінює колір фону на active.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 12

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.22

Зміна Стилів Елементів за Допомогою JavaScript

Свайпніть щоб показати меню

Зміна інлайнових стилів за допомогою властивості style

index.html

index.css

index.js

Додавання та видалення CSS-класів за допомогою classList

index.html

index.css

index.js

Практичний приклад: Перемикання теми

index.html

index.css

index.js

classList.replace() використовується для заміни класів light-theme та dark-theme залежно від поточного стану.

1. Яка властивість використовується для зміни inline-стилів елемента?

2. Як змінити колір фону `<div>` з ідентифікатором `box` на coral за допомогою JavaScript?

3. Що виконує наступний код?

Яка властивість використовується для зміни inline-стилів елемента?

Select the correct answer

style

classList

getComputedStyle()

Як змінити колір фону <div> з ідентифікатором box на coral за допомогою JavaScript?

Select the correct answer

document.getElementById('box').classList.add('coral');

document.getElementById('box').style.color = 'coral';

document.getElementById('box').style.backgroundColor = 'coral';

document.getElementById('box').setAttribute('backgroundColor', 'coral');

Що виконує наступний код?

Select the correct answer

Додає клас active, якщо його немає; видаляє, якщо він вже є.

Встановлює клас active як inline-стиль для кнопки.

Лише додає клас active без його видалення.

Змінює колір фону на active.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 12

Зміна Стилів Елементів за Допомогою JavaScript

Зміна інлайнових стилів за допомогою властивості style

Додавання та видалення CSS-класів за допомогою classList

Практичний приклад: Перемикання теми

1. Яка властивість використовується для зміни inline-стилів елемента?

2. Як змінити колір фону <div> з ідентифікатором box на coral за допомогою JavaScript?

3. Що виконує наступний код?

Awesome!

Зміна Стилів Елементів за Допомогою JavaScript

Зміна інлайнових стилів за допомогою властивості style

Додавання та видалення CSS-класів за допомогою classList

Практичний приклад: Перемикання теми

1. Яка властивість використовується для зміни inline-стилів елемента?

2. Як змінити колір фону <div> з ідентифікатором box на coral за допомогою JavaScript?

3. Що виконує наступний код?

2. Як змінити колір фону `<div>` з ідентифікатором `box` на coral за допомогою JavaScript?

2. Як змінити колір фону `<div>` з ідентифікатором `box` на coral за допомогою JavaScript?