Применение CSS-правил через JavaScript: динамический подход

Быстрый ответ

Вы можете изменить стили элемента, используя querySelector для выбора элемента и затем присваивая стили через .style:

document.querySelector('.myElement').style.cssText = 'color: blue; font-size: 20px;';

Свойство .cssText дает вам возможность задать несколько стилей за одна операцию. Для задания единственного стиля используйте следующий синтаксис:

document.querySelector('.myElement').style.backgroundColor = 'lightgreen';

Если необходимо динамически устанавливать CSS-параметры в зависимости от событий или условий, вы можете создать элемент <style> и добавить его в head страницы:

const style = document.createElement('style');
style.type = 'text/css';
let styles = `body { background: #f3f3f3; } .myClass { color: red; }`;
style.appendChild(document.createTextNode(styles));
document.head.appendChild(style);

Создание динамических стилей

Многострочный CSS с шаблонными строками

Для многострочных стилей шаблонные строки ES6 (в которых используются обратные кавычки `) облегчают чтение кода:

const styleEl = document.createElement('style');
styleEl.type = 'text/css';
styleEl.innerHTML = `
  body { margin: 0; }
  .dynamic-class { color: green; }
  #dynamic-id { font-size: 20px; }
`;
document.head.appendChild(styleEl);

Подробнее об этом расскажет наш спикер на видео

Добавление стилей с помощью манипуляций DOM

Вы можете использовать метод insertRule из DOM Level 2 CSS для вставки правила в stylesheet:

const sheet = document.styleSheets[0];
sheet.insertRule('.newClass { color: blue; }', sheet.cssRules.length);

В старых браузерах, где insertRule отсутствует, используйте addRule:

const sheet = document.styleSheets[0];
if(sheet.addRule) {
    sheet.addRule('.newClass', 'color: blue;', -1);
}

Поместите всё в одну строку

Эффективный способ добавления стилей в одной строке:

const addCSS = css => document.head.appendChild(document.createElement("style")).innerHTML = css;

Вызвать данную функцию можно так:

addCSS('body { background: coral; } .highlight { font-weight: bold; }');

Визуализация

Процесс добавления CSS через JavaScript можно сравнить с одеванием манекена:

Шаг 1: Манекен

const mannequin = document.querySelector('.mannequin');

Шаг 2: Выбираем одежду

mannequin.style.color = 'red';       // Красная рубашка
mannequin.style.fontSize = '20px';   // Размер шрифта

До: 🕴️ 
После: 🕴️👕

Теперь это не только манекен, но и икона моды! Быть стильным легко, используя JavaScript. 🕺👔

Как следовать лучшим практикам

Кроссбраузерность

При работе со стилями важно помнить о кроссбраузерности. Методы insertRule и addRule помогают учитывать поддержку устаревших версий браузеров.

Проблемы безопасности

Будьте осторожны, добавляя стили через JavaScript: возможны атаки через внедрение кода через CSS. Всегда проверяйте пользовательские данные перед их использованием.

Вопросы производительности

Изменения стилей могут негативно сказаться на производительности. Минимизируйте прямую манипуляцию с DOM для уменьшения затрат на перерасчёт стилей и перерисовку элементов.

Полезные материалы

1. Обновление CSS-переменных с помощью JavaScript на CSS-Tricks
2. JavaScript и стилизация DOM на w3schools
3. Метод .css() в документации jQuery API
4. Массовое применение стилей в JavaScript на Stack Overflow
5. Добавление правил CSS в stylesheets через JavaScript от Davida Walsha
6. Создание тега <style> с помощью JavaScript на Stack Overflow