如何使用JavaScript从HTML获取样式属性？

Question

我想使用JavaScript将所有应用的CSS规则获取到DOM节点。

我知道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选择器的特异性并为您覆盖！