我想使用 JavaScript 将所有应用的 CSS 规则应用到 DOM 节点。
我知道 getComputedStyle 存在，但它会返回所有样式，而不仅仅是从样式表应用的样式/内联样式/注入(inject) CSSOM 的样式。
我看到这项工作的唯一方法是在浏览器上复制 HTML，然后将其粘贴到一个 contenteditable 字段中。粘贴的 HTML 神奇地只包含节点上内联的相关样式和类名。我很想看看它是如何工作的。浏览器是否在复制期间为您内联应用的样式？如果是这样，它是如何做到的？
我想我可以试试类似的东西
const get_relevant_styles = function(el) {
const vanilla = document.createElement(el.tagName)
return diff_properties(getComputedStyle(vanilla), getComputedStyle(el))
}
但是对每个节点都这样做似乎非常昂贵。我猜浏览器会做一些更聪明的事情，也许是通过直接处理 CSSOM？任何见解表示赞赏:)
最佳答案
看来这可以用下面的库来解决!
http://www.brothercake.com/site/resources/scripts/cssutilities/
我不确定它是否解决了被 CORS 问题阻止的样式表，但它会计算 CSS 选择器特异性并为您覆盖!
关于javascript - 如何使用 JavaScript 从 HTML 获取样式属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58227926/