Изменение не-inline CSS стилей с помощью JavaScript

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

Для изменения стилей CSS с помощью JavaScript можно использовать конструкцию element.style.cssProperty. Этот подход подходит для решения простых задач. Например, если мы хотим изменить цвет текста в параграфе с идентификатором 'myPara', это можно сделать следующим образом:

// JavaScript окрашивает текст в красный цвет
document.getElementById('myPara').style.color = 'red';

Для CSS-свойств, записанных через дефис, необходимо использовать нотацию camelCase. Чтобы увеличить размер шрифта, выполните следующий код:

// JavaScript командует: "Шрифт, стань крупнее!"
document.getElementById('myPara').style.fontSize = '20px';

Однако если требуется управлять стилями, которые не заданы в виде inline-стилей, или необходимо изменить стили нескольких элементов, удобнее работать напрямую с таблицами стилей.

Глубже в таблицы стилей

JavaScript предоставляет доступ ко всем таблицам стилей документа через объект document.styleSheets, что позволяет гибко настроить стили CSS:

function modifyRule(selector, prop, value) {
  Array.from(document.styleSheets).some(sheet => {
      return Array.from(sheet.cssRules).some(rule => {
        if(rule.selectorText === selector) {
          rule.style[prop] = value;
          return true;
        }
      });
    })
}
// JavaScript, становясь невидимым, начинает охоту за стилями

Функция modifyRule из примера выше станет вашим ниндзя-помощником в мире таблиц стилей, которая находит требуемый селектор и изменяет нужное свойство.

Добавление новых правил "на лету"

Возможно также создание новой таблицы стилей и добавление в неё новых правил:

// Встречайте: ваш новый стилист на JavaScript
let sheet = document.createElement('style');
document.head.appendChild(sheet);
sheet.sheet.insertRule('body { background-color: yellow; }', 0);

В данном примере мы создали новую таблицу стилей и добавили в неё правило, которое окрашивает фон в яркий жёлтый цвет.

Проверка совместимости браузера

При работе со стилями через JavaScript важно учитывать совместимость с различными браузерами. Например, свойства cssRules и rules могут вести себя по-разному. В случае с Firefox 25+, для CSSStyleRule.style предусмотрены такие возможности:

if('CSSStyleRule' in window) {
 // Это сообщение для пользователей Firefox!
 document.styleSheets[0].insertRule(selector+' { '+property+': '+value+'; }', 0);
}

Чтобы переопределить другое правило, может понадобиться использование "!important":

rule.style.setProperty('color', 'blue', 'important');
// Встречайте: синий цвет в его наиболее важном исполнении

Интерактивное изменение стилей

Сделайте взаимодействие с сайтом более динамичным, меняя стили в зависимости от действий пользователя. Например, так:

document.getElementById('interactiveButton').addEventListener('mouseover', function() {
  modifyRule('.dynamicText', 'color', 'green');
  // Хоть мы и не можем превратить вас в Халка, зелёный текст при наведении сделает это ближе!
});

Теперь при наведении курсора на кнопку текст станет зелёного цвета.

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

Воспринимайте способность изменять стили с помощью JavaScript как своего рода суперсилу:

Суперсила: возможность менять цвета в любое время! 💥🎨 (благодарим за это JavaScript)

Используя эту "суперсилу", вы можете изменять окружение, словно "закрашивая" его:

document.getElementById('myRoom').style.backgroundColor = 'blue';
// И вдруг всё вокруг становится синим. Ваша комната превратилась в океан!

Шаблонизация, учитывающая специфичность

Для избежания конфликта стилей при их изменении через JavaScript, не забывайте о приоритетах CSS:

1. Инлайн стили (имеют самый высокий приоритет)
2. Идентификаторы
3. Классы, псевдоклассы, селекторы атрибутов
4. Элементы и псевдоэлементы

Производительность наших решений

Проблемы производительности могут возникать при частых изменениях в DOM или стилях. Для оптимизации нужно:

• Объединять изменения в DOM.
• Минимизировать количество перерасчетов стилей.
• Предпочтительно использовать применение классов вместо прямого изменения стилей.

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

1. HTMLElement: свойство style – Web API | MDN – подробное руководство по изменению CSS с использованием JavaScript непосредственно в элементах.
2. JavaScript DOM CSS – детальное описание того, как изменять HTML стили при помощи JavaScript.
3. Обновление переменной CSS с использованием JavaScript | CSS-Tricks – изложение методов динамического обновления CSS переменных через JS.
4. Добавление правил в таблицы стилей с помощью JavaScript – руководство по добавлению правил в таблицы стилей с использованием кода.
5. Стили и классы – обзор функций JavaScript для стилизации и изменения классов.
6. html – Как я могу изменить класс элемента с помощью JavaScript? – Stack Overflow – обсуждение различных способов изменения CSS класса элемента через JS.
7. html – Как применить CSS к iframe? – Stack Overflow – методы применения CSS к элементу iframe с использованием JavaScript.