jquery - 使用 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 并能够复制/从源中提取它。

感谢您的宝贵时间，对于给您带来的不便，我们深表歉意。