document.documentElement不维护使用'html'选择器指定的样式属性

Question

我已经为select'html'指定了一些css样式，如下所示：

<style type="text/css">
html { background-color:blue; }
</style>

通过javascript，我想访问这样的样式属性（例子）：

alert( document.documentElement.style.backgroundColor);

在Chrome中，属性为null，在FF中为空字符串。看来我可以通过CSS选择器访问html元素，但不能通过javascript通过document.documentElement ... hmmm，关于如何访问由css html选择器设置的样式（通过javascript）的任何建议？

提前致谢，Rein

Answer 1

这：

window
    .getComputedStyle( document.documentElement )
    .getPropertyValue( 'background-color' )

现场演示： http://jsfiddle.net/5jtqC/

style属性仅读取内联样式，而不是样式表定义的样式。

Answer 2

element.style仅通过style属性处理内联样式。

要获取元素的当前样式，请使用：

(element.currentStyle || getComputedStyle(element)).backgroundColor;