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', ...).
| Порада: | Якщо потрібно застосувати кілька стилів одночасно, використовуйте об'єктний літерал для присвоєння значень властивостям |
| Порада: | Для досвідчених розробників: використовуйте |
| Порада: | Пам'ятайте, що |
Синтаксис
Element.styleЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад демонструє використання властивості style об'єкта HTMLElement для динамічної зміни стилів елемента. Користувач може змінювати колір фону та розмір шрифту прямокутної коробки за допомогою відповідних полів введення. Кнопка "Скинути" дозволяє повернути стилі до початкових значень.
Властивість style надає доступ до стилів елемента, що дозволяє змінювати їх за допомогою JavaScript. У прикладі ми використовуємо box.style.backgroundColor та box.style.fontSize для встановлення нових значень стилів на основі введених користувачем даних.
У цьому прикладі ми змінюємо колір фону елемента на сторінці за допомогою властивості style об'єкта HTMLElement. Це один з найпростіших способів динамічно змінювати стилі елементів на веб-сторінці.
// Отримуємо елемент за його ідентифікатором
const myElement = document.getElementById('myElement');
// Встановлюємо колір фону елемента на червоний
myElement.style.backgroundColor = 'red';У цьому прикладі ми створюємо функцію, яка динамічно змінює стилі елемента залежно від його поточного стану. Це ілюструє більш складне використання властивості style, коли стилі змінюються на основі певних умов.
// Отримуємо елемент за його ідентифікатором
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);