Как получить атрибуты стиля из HTML с помощью JavaScript?

Question

Я хочу получить все примененные правила CSS для узла DOM с помощью JavaScript.

Я знаю, что существует getComputedStyle, но он возвращает ВСЕ стили, а не только стили, примененные из таблиц стилей / встроенных стилей / введенных стилейв CSSOM.

Единственный способ, которым я видел эту работу, - это скопировать HTML-код в браузере и вставить его в поле contenteditable. Вставленный HTML-код волшебным образом включает в себя только соответствующие стили, встроенные в узел, и имена классов. Мне было бы интересно посмотреть, как это работает. Браузер поддерживает встроенные стили во время копирования для вас? Если да, то как это сделать?

Думаю, я могу попробовать что-то вроде

const get_relevant_styles = function(el) {
  const vanilla = document.createElement(el.tagName)
  return diff_properties(getComputedStyle(vanilla), getComputedStyle(el))
}

, но сделать это для каждого узла кажется супер дорогим. Я предполагаю, что браузер делает что-то более умное, возможно, имея дело непосредственно с CSSOM? Любое понимание приветствуется:)

Answer 1

Похоже, что это можно решить с помощью следующей библиотеки!

http://www.brothercake.com/site/resources/scripts/cssutilities/

Я не уверен, решает ли он таблицы стилей, заблокированные из-за проблемы CORS, но он вычисляет специфичность селектора CSS и переопределяет его для вас!