Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
Решать задачи
×
Как изменить CSS-стили? Ответ очевиден — отредактировать CSS-файл. Возможно, после этого понадобится компиляция. Затем нужно обновить стили во время выполнения, изменив атрибуты элемента, такие как class
и aria-*
.
Хотя этот ответ неполный, подумайте над следующими вопросами:
- Как обновить стили во время выполнения, основываясь на взаимодействии с пользователем, а не на предустановленных значениях? Сгенерировать уникальные имена классов для каждой возможной комбинации цветов нереально.
- Что, если у вас нет доступа к таблицам стилей или HTML? Например, если сайт сгенерирован конструктором сайтов со сторонними CSS-файлами, изобилующими свойствами !important.
В этой статье мы рассмотрим четыре способа обновить CSS-стили при помощи JavaScript. Также мы кратко разберем, в каких случаях эти способы стоит применять. Наконец, мы оценим их с точки зрения CSS-сложности, т. е. того, насколько просто понять и изменить код в каждом случае.
Используйте встроенные стили
До изобретения CSS для стилизации веб-страниц использовались теперь уже устаревшие HTML-атрибуты, такие как color
, background
и border
. Встроенный CSS — духовный преемник этих атрибутов. При таком подходе свойства CSS задаются через атрибут style
элемента.
Два следующих способа изменить размер шрифта для элемента hero
равнозначны:
document.getElementById('hero').style = 'font-size: 12rem;'; document.getElementById('hero').style.fontSize = '12rem';
Использование JavaScript для обновления встроенного CSS в целом считается плохой практикой. Причин для этого несколько:
- Нарушается разделение между стилями и контентом, из-за чего становится сложнее читать и изменять документ.
- При таком подходе CSS-селекторы не могут формировать семантические абстракции.
- Без селекторов обновление нескольких элементов на странице потребует прохода по всем элементам, а это отнимает время. К тому же, таким образом можно допустить ошибки.
- Повторяющиеся стили раздувают ваш HTML.
- У вас не будет доступа к псевдоэлементам и псевдоклассам, они доступны только через CSS-селекторы.
В настоящее время мы наблюдаем возрождение встроенного CSS-lite через атомарные CSS-фреймворки, такие как Tailwind CSS. Атомарные фреймворки используют имена классов CSS, которые переводятся в одно CSS-свойство и основываются на генерации компонентов для повторного использования стилей при помощи JS. Это позволяет избавиться от проблем 3, 4 и 5 из приведенного выше списка. Но проблему раздувания HTML это все равно не решает.
Хотя встроенные CSS-стили в целом вредны, их применение имеет одно преимущество. Чтобы внести изменение, вам не нужно иметь доступ к таблицам стилей. Поэтому с их помощью вполне можно вносить некоторые правки по ходу работы.
Когда стоит применять встроенный CSS
- Для обновления стилей отдельного элемента во время выполнения.
- Для быстрой проверки чего-либо.
- Когда таблицы стилей недоступны.
Используйте HTML-атрибуты
Можно изменять и другие атрибуты элементов, не только style
. Это самый популярный способ, он позволяет создавать переиспользуемые и семантически значимые стили. Вот несколько примеров:
// toggles HTML semantic state document.getElementById('cta').disabled = true; // a aria based semantic button state document.getElementById('cta').ariaExpanded = "true"; // a class based semantic primary variation document.getElementById('cta').classList.toggle('primary');
Тут особо нечего добавить. Вероятно, вы и так пользуетесь этим методом. Такой код и понять просто, и изменить легко. К тому же, в нашем распоряжении множество CSS-методологий для контроля над его сложностью.
Но я хочу отметить, что примеры в приведенном выше коде расположены в порядке их значимости. Прежде чем прибегнуть к состояниям на основе классов, стоит обратиться к состояниям на основе атрибутов HTML. Теперь, когда селектор :has()
уже на горизонте, это стало проще.
Когда стоит модифицировать атрибуты помимо style
Всегда, когда у вас есть доступ к таблицам стилей и предопределенные стили.
Используйте CSSOM
Следующий метод изменения CSS посредством JavaScript можно сравнить со скальпелем в наборе инструментов фронтендера. Мы можем напрямую изменять объекты CSS.
Два предыдущих метода для изменения стилей модифицируют HTML DOM. Но в некоторых случаях проще изменить напрямую CSS Object Model (CSSOM).
Обратившись к объекту styleSheets
документа, мы можем избирательно менять стили сайта, используя всю мощь CSS. Например:
const thirdPartyStylesheet = document.styleSheets[0]; //index 15 rule color: red !important; thirdPartyStylesheet.deleteRule(15);
Можно даже добавить новые динамически генерируемые стили при помощи конструктора CSSStyleSheet. По своему опыту могу сказать, что это наилучший вариант, когда вы имеете дело со сторонними таблицами стилей или конструктором сайтов, т. е., когда ваши возможности работы с CSS ограничены.
Когда вы засоряете свои встроенные стили многочисленными !important
для перезаписи сторонних стилей, происходит жуткое разрастание CSS-селекторов. Изменение CSSOM позволяет этого избежать. Этот подход также может быть эффективнее перебора в цикле нескольких элементов для динамического обновления их стилей.
Основной недостаток CSSOM-подхода — такой код труден для понимания и отладки. Для измененного CSSOM нет поддержки в инструментах разработчика. И, если только вы не задокументировали свои шаги крупным шрифтом, ваш код может довести будущего мейнтейнера до ручки. Так же, как и скальпель, этот метод нужно использовать редко и осторожно.
Когда стоит модифицировать CSSOM
Больше всего этот способ подходит не для внесения новых стилей, а для удаления сторонних. Также с его помощью можно изменить стили, которые вы не контролируете.
Используйте пользовательские свойства CSS
Последний способ динамического обновления CSS-стилей предполагает применение пользовательских свойств CSS. Хотя технически тут не используются никакие новые APIs, применение пользовательских свойств существенно отличается от предыдущих подходов.
Пользовательские свойства можно использовать с любым из предыдущих методов:
const themeColor = document.getElementById('color-picker').value; // use with inline style document.body.style=`--theme-color: ${themeColor};`; // use in CSSOM const stylesheet = document.styleSheets[0]; stylesheet.insertRule(`:root { --theme-color: ${themeColor}; }`);
Пользовательские свойства элемента наследуются его потомками. Мы можем использовать их со встроенными стилями и не беспокоиться о выборке и переборе в цикле всех элементов в DOM. Все, что нам нужно, это найти их общего предка. В силу этой особенности пользовательские свойства также могут применяться для изменения псевдоэлементов при помощи встроенных стилей.
Самые значительные минусы применения пользовательских свойств — необходимость доступа к таблицам стилей и необходимость планирования своих действий. При благоразумном использовании с их помощью можно изменить несколько стилей за одно обновление. Пример — генерация целой цветовой палитры путем обновления одного цвета.
Применение пользовательских свойств требует такой же продуманности (если не большей), что и подход с изменением атрибутов элемента, но с его помощью можно менять стили во время работы кода.
Поддержка кода с пользовательскими свойствами проще, чем кода с измененной CSSOM: тут нужно отслеживать меньше изменений. Но при этом вам нужен доступ к таблицам стилей.
Когда стоит применять пользовательские свойства
- Вам нужно внести комплексные изменения стилей во время выполнения программы.
- Вы хотите создать новые отношения между стилевыми свойствами.
- Вам нужно пробить Shadow DOM, чтобы стилизовать множество веб-компонентов.
Итоги
Когда вам в очередной раз понадобится изменить CSS-стили при помощи JavaScript, спросите себя:
- Это предопределенное изменение или значение стиля определяется динамически во время работы программы?
- Я перекрываю существующие сторонние стили?
- Мне нужно изменить один элемент или несколько, включая псевдоэлементы и классы?
- Хочу ли я, чтобы это изменение повлияло на несколько производных свойств или затронуло несколько элементов на странице?
Исходя из ответов на эти вопросы, можно подобрать наиболее подходящий способ внесения изменений в CSS-стили.
Перевод статьи «How to Change CSS Styles with JavaScript – From Basic to Advanced Methods».
Как правило, начинающие изучать веб-разработку люди уже знают, как легко можно поменять внешний вид элемента с помощью CSS стилей. Но менять стили можно и через JavaScript. Когда же наступает необходимость это делать через JavaScript? Первое, что приходит в голову — это для создании анимаций.
Изменение стилей через CSS
У нас есть черный заголовок в розовой рамке. За внешний вида заголовка отвечают CSS стили.
//HTML код
<div class="container">
<h1 id="heading">Польза ананасов</h1>
</div>
//CSS код
.container {
width: 400px;
border: 10px solid plum;
margin: 20px auto;
}
#heading {
font-size: 24px;
font-weight: 700;
color: black;
font-family: 'Arial Narrow Bold', sans-serif;
text-align: center;
}
Если мы хотим изменит цвет у заголовка с черного на фиолетовый, то идем в CSS код и вручную заменяем значение у свойства color.
#heading {
color: violet;
}
Заголовок стал фиолетовый.
Изменение стилей через JavaScript
Но мы хотим большего взаимодействия с пользователем. Чтобы цвет заголовка менялся вследствии наступления какого-нибудь события (клика мыши). Изменим наш заголовок на фиолетовый через JavaScript. Действуем уже по отработанному алгоритму:
- Получить элемент
- Обратится к свойству элемента
- Установит новое значение
Найдем заголовок по названию селектора и поместим его в переменную headingElement для дальнейших манипуляций. Затем получим доступ к его атрибуту style и укажем нужное нам свойство color, которое собираемся изменить. То есть, мы обращаемся к свойству color у стиля того элемента, который лежит а переменной headingElement и устанавливаем ему новое значение — фиолетовый цвет. В записи мы используем две точки, потому что у нас два объекта. Первый объект сам элемент h1, а второй объект — style, в свойствах которого хранятся все стили элемента h1.
// получение элемента по селектору
let headingElement = document.querySelector('#heading');
// обращение к интересующему свойству и присвоение нового цвета
headingElement.style.color = 'violet';
Цвет заголовка опять поменялся на фиолетовый.
Названия свойств
Теперь попробуем изменить цвет рамки у заголовка. Действуем по аналогии с заменой цвета. Получаем элемент container, у которого будем менять цвет свойства border-color с розового на черный.
let containerElement = document.querySelector('.container');
containerElement.style.border-color = 'black'; // нельзя писать border-color
Упс! Ничего не произошло и выскочило сообщение об ошибке, а цвет у рамки не поменялся. Почему не сработало? Ведь в обычном CSS мы бы так и написали border-color: black. Все дело в дефисе, имена свойств в JavaScript не могут содержать дефис. Поэтому все CSS свойства в названиях которых есть дефис, нужно преобразовать в другой синтаксис. Для этого мы убираем дефис и пишем первую букву второго слова, заглавной. Такой стиль написания называется camelCase (верблюжий регистр), напоминающий горбы верблюда.
let containerElement = document.querySelector('.container');
containerElement.style.borderColor = "black"; // так правильно borderСolor
Теперь наш обновленный JavaScript сработал. Рамка у заголовка окрасилась в черный цвет.
Заключение
Зачем вообще нужно изменять элементы на странице с помощью JavaScript? Не проще ли сразу создать HTML страницу с необходимым CSSкодом? Все дело в том, что JavaScript позволяет реагировать на события, производимые пользователем и менять CSS свойства прямо на ходу. Во взаимодействии с пользователем и заключается вся сила языка JavaScript. Например вы можете создавать формы и проверять, что туда вводит пользователь. Просто создавать HTML страницы и стилизовать их согласно макету заказчика, недостаточно в современной веб-разработке. Вы можете возразить, что для этого есть другие специалисты — JavaScript программисты. Однако в реальном мире, заказчики предпочитают выбирать исполнителей с опцией «все включено», чтобы цепочка исполнителей была, как можно короче. Поэтому изучайте JavaScript на моем видеокурсе, если вы хотите стать востребованным фронтенд-разработчиком.
-
Создано 05.04.2021 10:14:06
-
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
Она выглядит вот так:
-
Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
Получение всех CSS-свойств элемента ( метод window.getComputedStyle() )
Метод window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента после применения всех активных таблиц стилей и завершения базовых вычислений значений, которые они могут содержать.
Синтаксис метода window.getComputedStyle():
let style = window.getComputedStyle(element [, pseudoElt]); |
где
- element — элемент (Element), CSS-свойства которого необходимо получить (вставка узлов, которые не являются элементами, например, #text, выдаст ошибку);
- pseudoElt (необязательный) — строка указывающая на найденный псевдоэлемент (опускается или null — для не псевдоэлементов).
Возвращённый объект style — «живой» объект CSSStyleDeclaration, который обновляется автоматически при изменении стилей элемента, только для чтения и может быть использован для инспектирования стиля элемента (включая описание из <style> элемента или внешней таблицы стилей).
ВАЖНО! Для использования метода window.getComputedStyle() для какого-либо элемента необходимо дождаться загрузки этого элемента (страницы) (используйте window.load или расположите скрипт ниже необходимого элемента).
Пример:
window.onload = function () { let btnBuyCss = document.getElementById(«btnBuy»); let res = window.getComputedStyle(btnBuyCss, null); console.log(res); } |
Использование метода window.getComputedStyle() с псевдоэлементами
Метод getComputedStyle() может получить информацию о стилях из псевдоэлемента (например, ::after, ::before, ::marker, ::line-marker и т.д.):
<style> h3::after { content: «rocks!»; } </style> <h3>generated content</h3> <script> var h3 = document.querySelector(«h3»); var result = getComputedStyle(h3, «:after»).content; console.log(«the generated content is: «, result); // «the generated content is: «rocks!» </script> |
Управление встроенными стилями элемента
Самый простой способ управления стилями CSS с помощью JS — это манипулирование атрибутом style отдельных элементов документа (подробнее об атрибуте элемента и свойстве элемента). При этом свойство style объекта Element имеет одну отличительную особенность: его значением является не строка, а объект CSSStyleDeclaration. Свойства этого объекта представляют CSS-свойства, определенные в HTML-атрибуте style.
Итак:
- атрибут элемента – это код (строки) HTML;
- свойство элемента – это поле DOM-объекта.
Для нестандартных атрибутов DOM свойство узла как объекта DOM не создаётся.
Например:
<style> h3 { font-weight: 100; // именование атрибута содержит дефис } </style> <h3>Некоторый текст</h3> <script> let h3 = document.querySelector(«h3»); h3.style.fontWeight = «bold»; // свойство, соответствующее атрибуту с дефисом, — через CamelCase h3.style.color = «red»; </script> |
Свойства стиля объекта CSSStyleDeclaration имеют тип всех значений string.
Например:
<style> h3 { position: absolute; font-family: sans-serif; } </style> <h3>Некоторый текст</h3> <script> let h3 = document.querySelector(«h3»); h3.style.position = «relative»; // значения имеют тип string h3.style.fontFamily = «sans-serif»; h3.style.color = «red»; </script> |
Кроме того, во всех свойствах позиционирования должны быть указаны единицы измерения, например:
h3.style.left = «600»; // Неправильно: отсутствуют единицы измерения h3.style.left = «600px»; // Правильно |
Особенности именования свойств объекта CSSStyleDeclaration:
- Если имя CSS-атрибута содержит дефисы (например, font-size), имя свойства объекта CSSStyleDeclaration образуется путем удаления дефисов и использования записи формата CamelCase (например, CSS-атрибут border-left-width доступен через свойство borderLeftWidth).
- Если CSS-свойство имеет имя, совпадающее с зарезервированным словом языка JavaScript (например, float), к этому имени добавляется префикс «css». В результате получим свойство cssFloat объекта CSSStyleDeclaration.
Особенности использования свойств объекта CSSStyleDeclaration:
- Атрибут <style> HTML-элемента — это его встроенный стиль, который в целом удобно использовать для начальной установки значений стиля. Однако сценарии JS могут читать свойства объекта CSSStyleDeclaration, только если эти свойства были ранее установлены сценарием на языке JavaScript или если HTML-элемент имеет встроенный атрибут style, установивший нужные свойства, например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> h3 { position: absolute; font-family: «Times New Roman», Times, serif; } </style> <h4 style=«padding: 20px»></h4> <h3>Некоторый текст H3</h3> <h4>Некоторый текст H4</h4> <script> let h3 = document.querySelector(«h3»); let h4 = document.querySelector(«h4»); console.log(h3.style.position); // пустая строка, свойство не установлено сценарием JS или атрибутом style console.log(h4.style.padding); // «20px» свойство установлено атрибутом style элемента h4 h3.style.fontFamily = «sans-serif»; // установим свойство сценарием JS console.log(h3.style.fontFamily); // «sans-serif» </script> |
Чтение встроенного стиля элемента представляет особую сложность, когда выполняется чтение свойств стиля, имеющих единицы измерения, а также свойств сокращенной формы записи (сценарий должен включать реализацию синтаксического анализа строк с CSS-стилями, чтобы обеспечить возможность извлечения и дальнейшего использования значений). Иногда бывает проще прочитать или записать единственную строку во встроенный стиль элемента, чем обращаться к объекту CSSStyleDeclaration. Для этого можно использовать методы getAttribute() и setAttribute() объекта Element или свойство cssText объекта CSSStyleDeclaration (подробнее…).
Class или style
Как правило, существует два способа задания стилей для элемента:
- cоздать класс в CSS и в HTML как <div class=»…»> и использовать его;
- определять стили непосредственно в атрибуте style как <div style=»…»>.
JavaScript может менять и классы, и свойство style, однако определение и изменение классов – предпочтительный вариант по сравнению с изменением style.
Использование style является приемлемым, если мы вычисляем координаты элемента и хотим установить их из JavaScript, например:
let top = /* вычисление во время работы скрипта */; let left = /* вычисление во время работы скрипта */; elem.style.left = left; // например, ‘333px’ elem.style.top = top; // например, ‘555px’ |
В остальных случаях целесообразно описывать в CSS и добавлять в класс — это более гибкое и лёгкое в поддержке решение.
Добавление классов
Классы (class) применяют тогда, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий:
tag.className { property_1: value; property_2: value; } |
где
- tag — тег, к которому применяется class;
- className — пользовательское имя класса class (имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_), использование кириллицы в именах классов недопустимо).
Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут class=»className«:
<div class=«myClass» id=«div_2»></div> document.getElementById(«div_2»).className // ‘myClass’ |
Добавление одного класса с помощью свойства className:
Присваивание какого-либо значения свойству className элемента полностью заменяет всю строку классов:
<div class=«myClass foo bar» id=«div_2»></div> <script> document.getElementById(«div_2»).className; // ‘myClass foo bar’ document.getElementById(«div_2»).className = «newMyClass»; document.getElementById(«div_2»).className; // ‘newMyClass’ (замена всей строки) </script> |
Добавление (удаление) выбранного класса из нескольких с помощью объекта (псевдомассива) classList:
Методы объекта classList:
- elem.classList.add(«class») – добавить класс;
- elem.classList.remove(«class») – удалить класс;
- elem.classList.toggle(«class») – добавить класс, если его нет, иначе — удалить;
- elem.classList.contains(«class») – проверка наличия класса (возвращает true/false).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang=«en»> <head> <h2>Мои примеры</h2> </head> <body> <div id=«div_1»> <li>Привет</li> <li>Мир</li> </div> <ul id=«ul»></ul> </body> </html> <script> let myElement = document.getElementById(«div_1»); myElement.classList.add(«foo»); // <div id=»div_1″ class=»foo»> … </div> myElement.classList.add(«bar»); // <div id=»div_1″ class=»foo bar»> … </div> myElement.classList.remove(«bar»); // <div id=»div_1″ class=»foo»> … </div> myElement.classList.toggle(«baz»); // <div id=»div_1″ class=»foo baz»> … </div> console.log(myElement.classList); // DOMTokenList(2) [‘foo’, ‘baz’, value: ‘foo baz’] // полная замена строки классов myElement.classList.value = «baz» // <div id=»div_1″ class=»baz»> … </div> </script> |
Объект classList является перебираемым, поэтому можно перечислить все классы элемента при помощи цикла for..of.
Добавление и удаление атрибутов
В CSS селекторы атрибутов позволяют установить стиль для конкретных элементов DOM по присутствию определённого атрибута тега или его значения.
У каждого элемента есть некоторый набор стандартных атрибутов (свойств), описанных в стандарте HTML именно для этого элемента (тега), например для <a> это будут href, name, а для <img> это будут src, alt, и т.д. Итак:
- атрибуты – это код (строки) HTML;
- свойство – это поле DOM-объекта.
Для нестандартных атрибутов DOM свойство узла как объекта DOM не создаётся.
Пример
<h2 id=«myMeta» lang=«ru» myAttr=«myAttr»>Заголовок H2</h2> <script> let myAttr = document.getElementById(«myMeta»); console.log(myAttr); // <h2 id=»myMeta» lang=»ru» myattr=»myAttr»>Заголовок H2</h2> myMeta.id; // myMeta myAttr.lang; // ru myAttr.myAttr; // undefined (нестандартный атрибут) </script> |
[свернуть]
Доступ к атрибутам осуществляется при помощи методов:
- работающих со значением, которое находится в HTML:
- elem.hasAttribute(nameAttr) – проверяет наличие атрибута;
- elem.getAttribute(nameAttr) – получает значение атрибута;
- elem.setAttribute(nameAttr, value) – устанавливает атрибут;
- elem.removeAttribute(nameAttr) – удаляет атрибут;
- свойства elem.attributes, которое содержит объект NamedNodeMap{}.
В отличие от свойств, атрибуты:
- всегда являются строками;
- их имя нечувствительно к регистру (это HTML);
- видны в innerHTML.
Пример
<h2 id=«myMeta» lang=«ru» myAttr=«myAttr»>Заголовок H2</h2> <script> let myAttr = document.getElementById(«myMeta»); console.log(myAttr); // <h2 id=»myMeta» lang=»ru» myattr=»myAttr»>Заголовок H2</h2> myAttr.hasAttribute(«LANG»); // true (нечувствителен к регистру) myAttr.hasAttribute(«myAttr»); // true myAttr.getAttribute(«myAttr»); // ‘myAttr’ (получаем значение нестандартного атрибута) myAttr.setAttribute(«myAttr», «newMyAttr»); // (изменим значение атрибута myAttr) myAttr.getAttribute(«myAttr»); // ‘newMyAttr’ myAttr.removeAttribute(«myAttr»); console.log(myAttr); // <h2 id=»myMeta» lang=»ru»>Заголовок H2</h2> </script> |
[свернуть]
Методы getAttibute(), setAttribute() и removeAttribute() сразу же меняют HTML-атрибуты элемента (в отличие от DOM-свойств), что вызовет браузерную перерисовку (вы сможете увидеть все изменения, изучив элемент с помощью инструментов разработчика в браузере). Такие перерисовки не только требуют больше ресурсов, чем установка DOM-свойств, но и могут привести к непредвиденным ошибкам. Как правило, их используют для элементов, у которых нет соответствующих DOM-свойств, например, colspan, или для HTML-свойств при наследовании.
Добавление (удаление) CSS-стилей
Свойство элемента element.style – это объект, поля которого соответствуют тому, что написано в атрибуте style, например:
// Установка style в HTML <h2 id=«myMeta» lang=«ru» myAttr=«myAttr» style=«font-size: 20px»> Заголовок H2 </h2> // Определение style через свойство element.style <script> let myAttr = document.getElementById(«myMeta»); console.log(myAttr.style.fontSize); // 20px (получаем значение) myAttr.style.fontSize = «40px»; // (можно задать новое значение) </script> |
Для обращения к свойству из нескольких слов используется camelCase, например:
- font-size => elem.style.fontSize;
- background-color => elem.style.backgroundColor;
- border-left-width => elem.style.borderLeftWidth.
Стили с браузерным префиксом, например, -moz-border-radius, -webkit-border-radius преобразуются по тому же принципу, при этом дефис обозначается через заглавную букву, например:
- button.style.MozBorderRadius = ‘5px’;
- button.style.WebkitBorderRadius = ‘5px’.
Сброс стилей:
- element.style = «none» или
- element.style = «».
<h2 id=«myMeta» lang=«ru» myAttr=«myAttr» style=«font-size: 20px»> <script> let myAttr = document.getElementById(«myMeta»); console.log(myAttr); // <h2 id=»myMeta» lang=»ru» myAttr=»myAttr» style=»font-size: 20px»> myAttr.style = «none»; console.log(myAttr); // <h2 id=»myMeta» lang=»ru» myAttr=»myAttr» style> // или myAttr.style = «»; console.log(myAttr); // <h2 id=»myMeta» lang=»ru» myAttr=»myAttr» style> </script> |
Если установить в element.style пустую строку «», то браузер применит CSS-классы и встроенные стили, как если бы свойства element.style вообще не было.
Установка нескольких стилей в одной строке (свойство style.cssText и метод setAttribute() ):
myAttr.style.cssText = «font-size: 40px; background-color: red»; |
Это свойство редко используется, потому что такое присваивание удаляет все существующие стили: оно не добавляет, а заменяет их. Его можно использовать, например, для новых элементов.
То же самое можно сделать установкой атрибута методом setAttribute():
myAttr.setAttribute(«style», «font-size: 40px; background-color: yellow»); |
In my previous article, we looked at different ways to get style information from an HTML element using JavaScript. Today, you’ll learn how to apply CSS styles to HTML elements with JavaScript.
Let us say we have the following <div>
element:
<div class="pizza">Hot, spicy, pizza 🍕</div>
Now, we want to change its text, background colors, and font style CSS properties using JavaScript. What should we do? There are multiple options available in JavaScript.
Inline Styles
The easiest and straightforward way to change the CSS styles of an element with JavaScript is by using the DOM style property.
All you need to do is fetch the element from DOM and change its inline styles:
const pizza = document.querySelector('.pizza')
// change the text color to white
pizza.style.color = 'white'
// set background color to blue
pizza.style.backgroundColor = 'blue'
// change font style to italic
pizza.style.fontStyle = 'italic'
The style
property uses the camel-case naming conventions for CSS properties and applies styles inline to the element:
<div class="pizza" style="color: white; background-color: blue; font-style: italic;">Hot, spicy, pizza 🍕</div>
Global Styles
Another way is to create a <style>
element, inject your CSS properties, and append it to the DOM. This option is beneficial if you want to apply styles to multiple HTML elements instead of just one.
First, let us create a <style>
element:
const style = document.createElement('style')
Next, add the CSS styles to the above tag using innerHTML
:
style.innerHTML = `
.pizza {
color: white;
background-color: blue;
font-style: italic;
}
`
Finally, append the style element to the DOM. To do this, get the <head>
tag using document.head
, and then call the appendChild()
method on it to append the style element:
document.head.appendChild(style)
Here is the complete JavaScript code snippet:
// create an element
const style = document.createElement('style')
// add CSS styles
style.innerHTML = `
.pizza {
color: white;
background-color: blue;
font-style: italic;
}
`
// append to DOM
document.head.appendChild(style)
CSS Object Model (CSSOM) InsertRule()
According to MDN:
The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify [the] CSS style dynamically.
The CSSStyleSheet.insertRule()
method inserts a new CSS rule to a stylesheet. Here is how you can use this method to add styles to the above HTML element:
// create an new style
const style = document.createElement('style')
// append to DOM
document.head.appendChild(style)
// insert CSS Rule
style.sheet.insertRule(`
.pizza {
color: white;
background-color: blue;
font-style: italic;
}
`)
It is not really required to create a new <style>
element. You can use existing <style>
elements as well as external stylesheets to add CSS rules using insertRule()
.
The insertRule()
method works in all modern browsers, including Internet Explorer 9 and higher.
Constructable Stylesheets
Constructable Stylesheets is a modern way of creating and distributing reusable styles when working with the Shadow DOM.
Here is an example that creates a Constructable Stylesheets and appends it to the Shadow DOM:
// create a new shared stylesheet
const sheet = new CSSStyleSheet()
// add CSS styles
sheet.replaceSync(`
.pizza {
color: white;
background-color: blue;
font-style: italic;
}
`)
// apply the stylesheet to a document
document.adoptedStyleSheets = [sheet]
Conclusion
In this article, we looked at four ways to add CSS styles to an HTML element in JavaScript.
So, which method should you use? It depends on what you want to achieve by dynamically changing the CSS.
If you only want to modify CSS styles for a single element, it is better to use the style property. This property changes the inline styles for a specific HTML element without affecting global styles.
If you want to apply a style to a set of HTML elements, create a new <style>
tag with the necessary CSS properties and append it to the document.
Read Next: How to add multiple CSS styles using JavaScript
✌️ Like this article? Follow me on
Twitter
and LinkedIn.
You can also subscribe to
RSS Feed.