Як змінити стилі елемента?

Зміна стилів елементів за допомогою JavaScript дозволяє створювати динамічні та чуйні інтерфейси, що реагують на дії користувача в реальному часі. Існує кілька підходів до керування зовнішнім виглядом елементів, кожен із яких підходить для певного кола завдань.

Найпряміший спосіб змінити окрему властивість стилю — звернутися до властивості style цільового елемента, наприклад: el.style.color = 'red'. Важливо пам'ятати, що імена властивостей CSS, що складаються з кількох слів, у JavaScript пишуться у форматі camelCase замість kebab-case. Так, CSS-властивість background-color перетворюється в JavaScript на backgroundColor. Цей підхід є ідеальним для точкової зміни одного чи двох параметрів, коли логіка інкапсульована прямо в скрипті.

Якщо вам потрібно застосувати одразу кілька стилів одночасно, зручніше використовувати властивість cssText. Вона дозволяє записати цілий рядок CSS-правил прямо в елемент, наприклад: el.style.cssText = 'color: red; background-color: blue; font-size: 16px;'. Однак варто враховувати, що присвоєння значення через cssText повністю перезаписує всі інлайн-стилі, які були задані раніше через властивість style.

Іноді виникає необхідність дізнатися не те, що записано в інлайн-стилях елемента, а його реальні, шукані браузером стилі з урахуванням усіх каскадних таблиць стилів і правил успадкування. Для цього використовується глобальна функція getComputedStyle(el). Вона повертає об'єкт з усіма обчисленими стилями елемента, значення яких можна прочитати, але напряму змінювати через цей об'єкт не можна.

Окремої уваги заслуговує робота з CSS custom properties (змінними). Ви можете динамічно змінювати значення CSS-змінних прямо з JavaScript, звертаючись до методу setProperty на об'єкті style елемента. Наприклад, el.style.setProperty('--main-color', '#ff0000'). Це неймовірно потужний підхід для реалізації тем оформлення, коли вся логіка зовнішнього вигляду винесена в CSS, а скрипт лише перемикає значення змінних.