使用javascript从元素中提取CSS

Question

是否可以构建一个可以在任何页面中运行的Applet，并通过选择一个元素来提取它的css属性？

想象一下，firebug允许您选择想要查看代码的div，而是选择一个按钮并在可复制和可以粘贴的可选字段中获取它的CSS。

Answer 1

您可以通过window.getComputedStyle

获取CSSStyleDeclaration对象

var styles = window.getComputedStyle(document.getElementById('foo'), null);
for (style in styles) {
    if (styles.hasOwnProperty(style)) {
        console.log(style, styles[style]);
    }
}

Answer 2

不确定Firebug错误Chrome的开发人员工具为您提供了可以复制，粘贴和编辑的CSS。它还显示了样式来自哪些文件，内部样式或内联的细分，以及最终级联的“计算样式”。

Answer 3

我想感谢谁试图帮助解决这个问题。

在考虑了我的要求和想要做的事情后，我们已经可以在内置的浏览器Web开发人员工具（如chrome或firefox）上找到它。

重新发明轮子是没有意义的，所以答案是，是的，可以用javascript这样做但是没有必要，因为我们已经可以找到工具来实现相同的结果，这将检查html和css并且能够从源中复制/提取它。

感谢您的时间，感谢您的不便。