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

Question

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

我知道 getComputedStyle 存在，但是 returns 所有样式，而不仅仅是从样式表应用的样式/内联样式/注入到 CSSOM 的样式。

我看到这项工作的唯一方法是在浏览器上复制 HTML，然后将其粘贴到 contenteditable 字段中。粘贴的 HTML 神奇地仅包含节点上内联的相关样式和 class 名称。我很想看看它是如何工作的。浏览器是否在复制期间为您内联应用的样式？如果是这样，它是如何做到的？

我想我可以试试

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

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

How to get style attributes from HTML with JavaScript?

html

javascript

css

browser

copy-paste