JavaScript 获取当前应用于元素的样式列表

List only渲染的样式，而不是未应用的任意样式

我尝试了很多方法来将样式应用于元素，但结果都是空白。

请不要引用getComputedStyle除非你能解决垃圾退货问题，否则这是一个解决方案。

主要问题是window.getComputedStyle(document.querySelector('ANY ELEMENT')).fill将返回"rgb(0, 0, 0)"，即not几乎在任何情况下都是正确的样式，并且没有明显的方法来区分它是否实际被应用。

上面的例子并不是唯一的问题案例；返回的规则有很多getComputedStyle这是错误的，如果应用它们，将会极大地改变页面的外观。

静态解析不是一个选项，因为在某些情况下 .css 文件位于另一台没有跨域标头的服务器上；这也隐藏了通常在中找到的样式document.styleSheets.

有什么方法可以获取已应用样式的列表而不是其他样式吗？

根据要求，此代码将演示该问题（在 Chrome 上）：

var all = document.getElementsByTagName('*');
for(var i in all)
    if (all[i].style) all[i].style.cssText = window.getComputedStyle(all[i]).cssText;

编辑：我的答案有适用于所有浏览器的代码。我保留上面的内容是为了保留评论线程。

这是不需要检查深度的版本。 您代码中的问题是前一个元素中内联样式的分配将影响下一个结果的 getComputedStyle 结果。这意味着 getComputedStyle 的值在循环中始终在变化。您可以先将其存储在这样的数组中。

var all = document.getElementsByTagName('*');
tmpArr = []
for(var i in all) {
    if (all[i].style) {
        tmpArr[i] = window.getComputedStyle(all[i]).cssText;
    }
}
for(var i in all) {
    if (all[i].style) {
        all[i].style.cssText = tmpArr[i]; ;
    }
}
console.log("finish");

你可以改变tmpArr[i] = window.getComputedStyle(all[i]).cssText; to tmpArr[i] = window.getComputedStyle(all[i]).cssText + "-webkit-text-fill-color:#691099!important";测试它是否有效

由于内联样式过多，打开检查器会很慢，但是只要将样式设置为内联样式就可以解决问题。