Свойство Element.style в JavaScript
Свойство Element.style в JavaScript, как правило, используется только для чтения. Оно возвращает объект CSSStyleDeclaration — массив CSS-стилей элемента, а также пары (key: value) всех его стилей. Все они доступны для чтения и изменения.
<p class="element" style="background-color: yellow; color: blue;"> Hello, world! </p>
// Получаем объект CSSStyleDeclaration
let el = document.querySelector('.element');
// Выводим в консоль объект CSSStyleDeclaration
let elStyles = el.style;
console.log(elStyles);Но задавать стили напрямую с помощью этого свойства — плохая практика.
elStyles.style = 'color: red; font-size: 3rem;';
Установить напрямую отдельные стили с помощью свойства Element.style и JavaScript можно, используя CamelCase.
elStyles.fontSize = '3rem'; elStyles.color = 'red';
Несмотря на то, что большинство современных браузеров позволяют это делать, такой подход тоже не рекомендуется.
Как правильно использовать Element.style в JavaScript
В таком случае как изменить Element.style? Лучшим вариантом является использование свойства Element.style.cssText, которое работает как Element.className, но для инлайновых стилей. Его можно применять в качестве геттера или сеттера.
В первом случае он позволяет получить все инлайновые стили элемента в формате строки. Во втором — заменит все текущие стили элемента на указанные в Element.style.cssText. Они также задаются в строковом формате.
// Получаем инлайновые стили элемента (если таковые имеются) let elStyles = el.style.cssText; // Удаляем существующие стили и заменяем их на новые elStyles.cssText = 'color: red; font-size: 3rem;';
Если задача состоит не в полной замене стилей, а добавлении дополнительных или замене одного конкретного стиля, то и это cssText позволяет легко реализовать через свойство Element.style и JavaScript.
// Добавляем новый инлайновый стиль к существующим elStyles.cssText += 'color: green;';
При наличии у элемента стилей, прописанных в CSS обычным способом, инлайновые, конечно, их «затрут».
Такой способ отлично подойдет для динамичного управления стилями элемента, например, при определенных действиях пользователя. Это позволит придать интерфейсу динамики.
