JavaScript: Как считывать значения CSS-правил по классам?

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

Чтобы получить вычисленные значения CSS-стилей, используйте функцию getComputedStyle():

let style = getComputedStyle(document.querySelector('.example'));
console.log(style.color); // Выведет актуальный цвет элемента

Но что, если необходимо заглянуть глубже и просмотреть все стили определенного селектора? Давайте отправимся в захватывающее путешествие по миру CSS.

Исследование глубин CSS с помощью document.styleSheets

Чтобы обнаружить применяемые стили для определенного селектора во всех таблицах стилей, можно использовать следующий метод:

function getCssRulesBySelector(selector) {
  let results = []; // Здесь будут собираться наши "находки"

  // Перебираем все таблицы стилей
  for (const sheet of document.styleSheets) {
    const rules = sheet.rules || sheet.cssRules; // Учитываем различия в названиях в зависимости от браузера

    // Перебираем все правила в каждой таблице стилей
    for (const rule of rules) {  
      if (rule.selectorText === selector) {
        // Нашли нужное CSS-правило
        results.push(rule.style.cssText || rule.cssText);
      }
    }
  }
  // Собираем все найденные правила в одну строку и возвращаем  
  return results.join(' ');
}

Этот метод собирает и возвращает все CSS-правила, соответствующие заданному селектору, в виде строки.

Управление в условиях псевдоклассов и медиазапросов

Мы готовы к бою! Если на нашем пути встретятся псевдоклассы и медиазапросы, наш метод сможет с ними справиться:

function getCssRulesBySelector(selector, includeMediaQueries = false) {
  let results = [];
  // ...
      if (rule.selectorText === selector) {
        results.push(rule.style.cssText || rule.cssText);
      } else if (includeMediaQueries && rule.conditionText) {
        rule.cssRules && Array.from(rule.cssRules)
          .forEach(innerRule => {
            if (innerRule.selectorText === selector) {
              results.push(innerRule.style.cssText || innerRule.cssText);
            }
          });
      }
  // ...
}

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

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

getComputedStyle(element).getPropertyValue('--my-custom-property');

Помните, что это — своего рода сигнал сонара, который помогает вам найти то, что нужно:

Ваши стили:
| Селектор      | Свойство            | Значение  |
| ------------- | --------------------- | --------- |
| .my-class     | --my-custom-property  | 'blue' 🎉 |

Результат:
'blue' // Найденное значение 🎉

CSS-сокровища уже открыты для вас; теперь можно приступать к извлечению нужных значений!

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

Вычисленные и объявленные стили: Подводный мир CSS-противоречий

Важно различать вычисленные и объявленные значения. getComputedStyle() предоставляет фактическое значение, которое формируется после всех преобразований и наследования CSS:

• Оно может отличаться от того, что вы указали в стиле, если на него влияют другие правила.
• Не выводит значения, которые не имеют смысла для элемента (например, width у строчного элемента).

document.styleSheets, в свою очередь, отображает объявленные значения:

• Они отражают то, что вы первоначально написали в CSS.
• Не включают специфические переопределения и стили браузера.

Пользовательские свойства: Пиратский кодекс CSS

Если вашей задачей является чтение CSS-переменных (пользовательские свойства), то getComputedStyle() также пригодится:

let rootStyle = getComputedStyle(document.documentElement);
console.log(rootStyle.getPropertyValue('--my-variable'));  // 🎁 Раскрывает нужное значение!

Лабиринт специфичности

Специфичность CSS может запутать, когда вы столкнетесь с неожиданными стилями:

• Инлайновые стили обладают максимальной специфичностью, будто по VIP-пропуску.
• !important — это агрессивный, но эффективный способ переопределить стили.
• JavaScript имеет возможность изменять стили в реальном времени, словно магия!

Поиск и тестирование вашего CSS — это лучшие инструменты для понимания и контроля над стилями.

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

1. Window.getComputedStyle() – Web APIs | MDN
2. CSSStyleDeclaration Object
3. Выбор и манипулирование CSS псевдоэлементами с помощью JavaScript – Stack Overflow
4. Обновление CSS переменной с помощью JavaScript | CSS-Tricks
5. Document.styleSheets – Web APIs | MDN
6. Использование CSS переменных (пользовательские свойства) – CSS: Cascading Style Sheets | MDN
7. Стили и классы