JS властивість Element.style

Загальний опис

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

Властивість style повертає об'єкт CSSStyleDeclaration, що представляє всі застосовані стилі для елемента. Цей об'єкт містить властивості, що відповідають властивостям CSS, наприклад style.color, style.backgroundColor тощо. Значення цих властивостей можна змінювати, щоб динамічно оновлювати стилі елемента.

Найпростіший спосіб використання style - це присвоєння значення безпосередньо властивості стилю. Наприклад:

const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '16px';

У цьому прикладі ми отримуємо елемент за його ідентифікатором та змінюємо колір тексту на червоний і розмір шрифту на 16 пікселів.

Властивість style також дозволяє використовувати властивості CSS, що містять дефіси, але в цьому випадку їх потрібно записувати з використанням кемел-кейсу (camelCase). Наприклад:

element.style.backgroundColor = 'lightgray';
element.style.borderRadius = '5px';

Крім того, style можна використовувати для застосування складніших стилів, таких як переходи, анімації та трансформації. Наприклад:

element.style.transition = 'all 0.3s ease';
element.style.transform = 'scale(1.2)';

Цей код додає перехід тривалістю 0.3 секунди з ефектом пом'якшення та збільшує масштаб елемента на 20%.

Властивість style також дозволяє видаляти стилі, присвоюючи їм порожнє значення. Наприклад:

element.style.color = '';

Це видалить стиль кольору тексту для елемента.

Важливо пам'ятати, що властивість style змінює лише інлайнові стилі елемента. Якщо стилі задані в CSS-файлі або у вбудованому стилі (<style> в HTML), вони матимуть вищий пріоритет і не будуть змінені через style. Для зміни цих стилів потрібно використовувати інші методи, такі як element.classList або element.setAttribute('style', ...).

правити

Порада

Пам'ятайте, що style змінює лише інлайнові стилі елемента. Якщо стилі задані в CSS-файлі або у вбудованому стилі, вони матимуть вищий пріоритет. Для зміни цих стилів використовуйте element.classList або element.setAttribute('style', ...).

автор: Bond правити

Порада

Для досвідчених розробників: використовуйте style обережно, особливо у великих додатках. Динамічні стилі можуть ускладнити відстеження та підтримку коду. Замість цього, розгляньте можливість використання CSS-модулів або CSS-in-JS бібліотек, які забезпечують кращу модульність та керованість стилів.

автор: Bond правити

Порада

Якщо потрібно застосувати кілька стилів одночасно, використовуйте об'єктний літерал для присвоєння значень властивостям style. Це зробить код більш компактним і зручним для читання:

const element = document.getElementById('myElement');
element.style = {
  color: 'red',
  fontSize: '16px',
  backgroundColor: 'lightgray'
};

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.style

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myElement">Демонстраційний елемент</div>

// Отримуємо елемент за його ідентифікатором
const myElement = document.getElementById('myElement');

// Встановлюємо колір фону елемента на червоний
myElement.style.backgroundColor = 'red';

<button id="myButton">Натисни</button>

// Отримуємо елемент за його ідентифікатором
const myButton = document.getElementById('myButton');

// Функція, яка змінює стилі кнопки
function toggleButtonStyles() {
  // Перевіряємо поточний колір фону кнопки
  const currentColor = myButton.style.backgroundColor;

  // Якщо колір не встановлено або встановлено на білий
  if (!currentColor || currentColor === 'white') {
    // Встановлюємо нові стилі
    myButton.style.backgroundColor = 'green';
    myButton.style.color = 'white';
    myButton.style.padding = '10px';
  } else {
    // Інакше скидаємо стилі до початкових значень
    myButton.style.backgroundColor = 'white';
    myButton.style.color = 'black';
    myButton.style.padding = '5px';
  }
}

// Додаємо обробник події для кнопки
myButton.addEventListener('click', toggleButtonStyles);