Стилизация элементов: style, getComputedStyle

Введение: Почему style и getComputedStyle — это мощь 💪

Когда ты хочешь изменить или прочитать стили элемента в JavaScript, у тебя есть два главных инструмента: свойство style и метод getComputedStyle(). Первое позволяет менять стили на лету, а второе — получать итоговые стили, включая CSS из таблиц стилей. Разберём оба подхода детально!

Свойство style: Быстрое управление CSS

Свойство style даёт доступ к inline-стилям элемента (те, что записаны прямо в атрибуте style HTML). Оно работает как объект, где ключи — это CSS-свойства в camelCase:

const button = document.querySelector('button');

// Меняем цвет фона и размер текста
button.style.backgroundColor = 'gold';
button.style.fontSize = '20px';

🔥 Важно! CSS-свойства в style пишутся в camelCase: font-size → fontSize, background-color → backgroundColor.

Особенности style:

• Работает только с inline-стилями (не видит стили из CSS-файлов).
• Изменения применяются мгновенно и имеют наивысший приоритет.
• Можно читать и записывать значения.

// Чтение inline-стиля (пусто, если стиль не задан в HTML)
console.log(button.style.color); // ''

getComputedStyle(): Полный доступ к стилям 🧐

Если нужно узнать итоговые стили элемента (учитывая все CSS-правила), используй getComputedStyle(). Он возвращает объект со всеми свойствами, включая вычисленные браузером:

const button = document.querySelector('button');
const computedStyles = getComputedStyle(button);

console.log(computedStyles.color); // 'rgb(0, 0, 0)' (если цвет чёрный по CSS)
console.log(computedStyles.fontSize); // '16px' (значение по умолчанию)

Ключевые моменты:

• Возвращает только для чтения — нельзя изменить стили через этот метод.
• Значения возвращаются в стандартизированном формате (например, rgb() для цвета).
• Учитывает все CSS-источники: inline, таблицы стилей, медиа-запросы.

Пример: Динамическое изменение стилей 🌈

Допустим, мы хотим сделать кнопку, которая меняет цвет при нажатии и показывает текущий размер шрифта:

const button = document.querySelector('.magic-button');

button.addEventListener('click', () => {
  // Меняем background через style
  button.style.backgroundColor = `hsl(${Math.random() * 360}, 70%, 50%)`;

  // Получаем текущий размер шрифта через getComputedStyle
  const fontSize = getComputedStyle(button).fontSize;
  console.log(`Текущий размер шрифта: ${fontSize}`);
});

💡 Совет: Для сложных анимаций используй getComputedStyle, чтобы проверить текущие значения перед изменением.

Разница между style и getComputedStyle 🆚

Полезные приёмы 🛠️

1. Сброс inline-стиля

Чтобы удалить inline-стиль, присвой ему пустую строку:

button.style.backgroundColor = ''; // Стиль удалён, вернётся значение из CSS

2. Получение псевдоэлементов

getComputedStyle может читать стили псевдоэлементов (::before, ::after):

const styles = getComputedStyle(button, '::before');
console.log(styles.content); // Например, '"★"'

Частые ошибки и как их избежать 🚨

• Ошибка: Использовать style для чтения всех стилей.

// Неправильно (вернёт '', если нет inline-стиля)
const color = button.style.color;

// Правильно (используй getComputedStyle)
const color = getComputedStyle(button).color;

• Ошибка: Забывать про camelCase в style.

// Так не сработает!
button.style.background-color = 'blue'; // Ошибка
// Правильно:
button.style.backgroundColor = 'blue';

Заключение: Когда что использовать 🎯

• style — твой выбор, когда нужно изменить стиль элемента динамически (например, в обработчиках событий).
• getComputedStyle — незаменим, когда нужно прочитать итоговые стили, включая CSS из внешних файлов.

Попробуй применить эти методы в своём коде — и ты увидишь, насколько мощным становится управление стилями через JavaScript! 🚀