Как получить и извлечь соответствующие правила CSS на DOM-узле?

Question

Я хотел бы знать простой способ получить все правила и классы CSS на определенном узле DOM и поддереве программным способом.

Chrome Dev Tools

Проверка стиля элемента в инструментах Chrome Dev возвращает 2 панели

1. Вычисленный стиль
2. Стили

Панель стилей имеет 3 разные категории стилей:

• element.style
• Соответствующие правила CSS
• унаследованные от ....

Функция window.getMatchedCSSRules довольно близко подходит к панели Matched CSS Rules в dev-tools.Я хочу перебрать элемент и его дочерние элементы и добавить соответствующие правила css в строку.

Эта обновленная скрипта объясняет и демонстрирует ожидаемый и нежелательный результат

Пример:

<a class="one to many">
    <span class="even more">foo</span>
    <span class="way muchMore"> bar</span>
</a>

Как я могу получить все CSS-классы с помощью стилей, как этот

a.one { color: red; }
.to { margin: 2em}

И так далее.Следующая функция довольно близка к ожидаемому результату:

// el = a DOM-Node document.getElementById(id);
function getCssText(el) {
    var cssText = "";
    var cssRuleList = window.getMatchedCSSRules(el, '');
    for (var i = 0; i < cssRuleList.length; i++) {
        cssText += cssRuleList[i].cssText + " ";
    }
    return cssText;
}

Александр указал на это обсуждение о window.getMatchedCSSRules (), возвращающее null

Есть ли у кого-нибудь плагинили более сложная функция для меня, чтобы получить классы css и значения domnode?

Answer 1

Что мешает вам выбирать и копировать мышью (Ctrl-C, что угодно) содержимое раздела «Соответствующие правила CSS» или «Вычисляемые стили» на боковой панели (я пропускаю задачу, которую вы пытаетесь решить?)

Существует известная проблема с вставкой скопированного содержимого в хорошо известные текстовые редакторы с поддержкой HTML (свойства CSS внутри правил отображаются в виде нумерованного списка, что на самом деле является ошибкой в ​​соответствующих редакторах), но в противном случае, если вы хотите чтобы вручную получить копию всех ваших совпавших правил CSS / вычисленного стиля для элемента DOM, этот рабочий процесс должен работать для вас.

Стороннее редактирование

В комментарии ниже рекомендуется использовать window.getMatchedCSSRules(). Использование этого в Chrome 62 возвращает это

VM1395: 1 [Устаревание] 'getMatchedCSSRules ()' устарело. Для большего помогите, проверьте https://code.google.com/p/chromium/issues/detail?id=437569#c2

Обсуждение getMatchedCSSRules было начато в ноябре 2014 года и содержит этот бит getMatchedCSSRules is non-standard and likely to be removed in the coming months. Relying on it is bad for cross-browser interop since major browsers like Firefox and IE won't be supported. Похоже, M63 начнет его удалять.

Альтернативой может быть использование CSS Object Model (CSSOM)

Answer 2

На вкладке «Элементы» инструментов dev в chrome, если вы выберете какой-либо конкретный узел, он отобразит все соответствующие правила стиля на панели справа (как индивидуально подобранные правила, так и общий вычисленный стиль для узла).