1. Что такое element.style?
Почти все современные веб-приложения используют динамическое изменение внешнего вида элементов: подсветка кнопки при клике, скрытие/показ блоков, анимации, смена темы и так далее. Всё это делается с помощью изменения CSS-стилей через JavaScript.
Стили можно менять двумя основными способами:
- Прямо через свойство element.style (про это сегодня).
- Через добавление/удаление CSS-классов (про это — в следующей лекции).
Сегодня мы разберём первый способ — прямое изменение стилей через объект style.
Каждый DOM-элемент в JavaScript (будь то кнопка, div, картинка, или даже сам <body>) — это объект, у которого есть специальное свойство style. Это не просто строка, а объект типа CSSStyleDeclaration, который содержит все возможные CSS-свойства, которые можно задать этому элементу прямо "вручную".
Если вы когда-нибудь писали в HTML вот так: <div style="color: red; background: yellow;"> то через element.style вы можете сделать то же самое, но из JavaScript.
Пример: самый первый стиль
const myDiv = document.getElementById('hello');
myDiv.style.color = 'red'; // Сделаем текст красным
Если бы мы открыли HTML-код этого элемента после такого изменения, то увидели бы:
<div id="hello" style="color: red;">...</div>
2. Как работает element.style: синтаксис
Всё очень просто:
— Слева — имя свойства (в JS-стиле).
— Справа — значение в виде строки (как в CSS, только без точек с запятой).
Важный нюанс:
В JavaScript имена CSS-свойств пишутся в camelCase (верблюжий стиль), а не через дефис, как в CSS.
| CSS | JS (element.style) |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
Пример:
myDiv.style.backgroundColor = 'yellow';
myDiv.style.fontSize = '24px';
myDiv.style.borderRadius = '10px';
3. Какие значения можно задавать?
Значения свойств в element.style — это строки, как в CSS, но есть пара тонкостей:
- Единицы измерения надо указывать явно!
Например, fontSize = '20px', а не просто 20. - Цвета можно задавать в любом CSS-формате: 'red', '#FF0000', 'rgb(255, 0, 0)'.
- Значения типа "auto", "block", "none" — тоже работают.
Пример:
const box = document.getElementById('box');
box.style.width = '200px';
box.style.height = '100px';
box.style.backgroundColor = '#00ffcc';
box.style.display = 'block';
4. Практика: делаем "волшебную кнопку"
Давайте сделаем кнопку, при нажатии на которую меняется цвет блока:
<button id="magicBtn">Сделать красным!</button>
<div id="colorBox" style="width: 100px; height: 100px; background: gray;"></div>
const btn = document.getElementById('magicBtn');
const box = document.getElementById('colorBox');
btn.onclick = function() {
box.style.backgroundColor = 'red';
box.style.borderRadius = '20px';
box.style.boxShadow = '0 0 10px black';
};
Теперь при каждом клике блок становится ярко-красным и с красивой тенью!
5. Основные свойства, которые чаще всего меняют
Вот небольшой "шпаргалочный" список свойств, которые часто меняют через JS:
| Свойство | Описание | Пример значения |
|---|---|---|
|
Цвет текста | |
|
Цвет фона | |
|
Ширина | |
|
Высота | |
|
Отображение (блок, скрыть и т.д.) | |
|
Граница | |
|
Скругление углов | |
|
Размер текста | |
|
Отступ слева | |
|
Прозрачность (от 0 до 1) | |
|
Тень | |
|
Видимость | |
6. Полезные нюансы
Как "стирать" стили
Если вы хотите убрать стиль, который задали через JS (или через атрибут style), просто присвойте пустую строку:
box.style.backgroundColor = ''; // Сбросит к стилю из CSS
Это как "стереть" ручку ластиком: если в CSS-файле для этого блока задан другой цвет фона — он снова появится.
Отличие element.style от CSS
Важно понимать:
— element.style меняет только инлайновые стили (то, что прямо в атрибуте style).
— Если для элемента есть стили в CSS-файле, то инлайновый стиль всегда важнее (он "перебивает" CSS).
— Если вы хотите вернуть элементу стиль из CSS, просто очистите свойство (style.property = '').
Пример:
#colorBox {
background: green;
}
В JS:
box.style.backgroundColor = 'red'; // станет красным
box.style.backgroundColor = ''; // снова станет зелёным (как в CSS)
Чтение текущих стилей: подвохи
Если вы попытаетесь прочитать стиль через element.style, вы получите только то, что было установлено инлайново (через JS или атрибут style).
console.log(box.style.backgroundColor); // 'red' (если был установлен через JS)
console.log(box.style.width); // '' (если ширина только в CSS)
Чтобы узнать реальный стиль элемента (учитывая все CSS-файлы, классы и т.д.), используйте:
const computed = getComputedStyle(box);
console.log(computed.backgroundColor); // например, 'rgb(0, 255, 204)'
console.log(computed.width); // '100px'
7. Типичные ошибки при работе с element.style
Ошибка №1: забыли про camelCase.
В CSS пишется background-color, а в JS — только backgroundColor. Если написать box.style.background-color = 'red', будет ошибка или ничего не произойдёт.
Ошибка №2: не указываете единицы измерения.
box.style.width = 100 — не сработает! Должно быть box.style.width = '100px'.
Ошибка №3: пытаетесь прочитать стиль, заданный только в CSS.
box.style.backgroundColor вернёт пустую строку, если цвет был задан только в CSS-файле. Для этого нужен getComputedStyle.
Ошибка №4: забыли сбросить стиль.
Если вы хотите вернуть элементу внешний вид "по умолчанию", не забудьте присвоить пустую строку нужному свойству.
Ошибка №5: перепутали style и classList.
Для сложных изменений лучше использовать классы (element.classList.add/remove), а не менять каждый стиль по отдельности. Но об этом — в следующей лекции!
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ