使用 JavaScript 获取元素的所有 CSS 样式

Question

有没有办法用 JavaScript 选择元素的所有 CSS 规则？我不是在寻找特定的解决方案，只要读取给定元素的所有 CSS 规则即可。

所以，我有以下 HTML

<div class='styledDiv' style='height:100px;width:100px;'></div>

然后在一个单独的 CSS 文件中：

.styledDiv
{
  background-color: #ccc;
  border: solid 5px blue;
}

我希望最终结果包含所有内联和单独的文件 CSS 规则。最终结果是什么格式都没有关系，是字符串还是数组，随便。

我还要提一下，我查看了一些从单独的 CSS 文件中读取 CSS 规则的代码。我认为可能有更好的解决方案。此外，FireFox 和 Chrome 允许循环 .style 属性，就像循环数组一样。但是，FF 吐出 -*tl-source 左右边框/边距/填充规则，并且不显示实际的 CSS 值。涉及jQuery的解决方案也可以。

Answer 1

对于 FireFox，您可以使用：https://developer.mozilla.org/en/DOM:window.getComputedStyle

对于 IE，你可以使用这个： http://msdn.microsoft.com/en-us/library/ms535231(VS.85).aspx

注意！你正在这里踩在黑暗的水域。

这些结果返回浏览器对 CSS 的解释。例如，在获取颜色时，IE 将返回 HEX 颜色代码，而 Firefox 返回 rbg 代码。对于字体大小，IE 将返回实际的 inherited 字体大小，而 Firefox 将返回基于 pt 的字体大小。