Несколько способов добавления CSS-правил в JavaScript:
- Использование свойства style. 2 Этот способ подходит, если нужно изменить стили для одного элемента. 2 Нужно выбрать элемент с помощью методов DOM, например document.querySelector(), и установить значения свойств объекта style. 3
- Использование свойства cssText. 13 Оно позволяет задать несколько стилей за одну операцию. 1 Для этого нужно использовать оператор +=, который добавляет новые стили к существующим. 3 Если применить оператор =, то существующие стили будут удалены. 3
- Создание элемента <style> и добавление его в head страницы. 1 Этот способ используют, если нужно динамически устанавливать CSS-параметры в зависимости от событий или условий. 1 Нужно создать элемент style, заполнить его правилами CSS и добавить в дерево DOM. 3
- Использование метода insertRule. 15 Он позволяет вставить новое правило в stylesheet. 15 Второй параметр метода — позиция или индекс правила в stylesheet, который начинается с 0. 5 Индекс нового правила должен быть после индекса последнего правила в stylesheet. 5
- Использование функции, которая добавляет стили в одной строке. 1 Функция принимает CSS-код и добавляет его в элемент style. 1
При добавлении стилей через JavaScript важно помнить о кроссбраузерности и проблемах безопасности. 1