javascript获取style里设置样式的问题！

原来代码如下：

CSS Code:

<style type="text/css">
#dd{width:100px; height:100px; background:green; padding:10px; border:10px solid red; }
</style>

Xhtml Code:

<div id="dd" >dd</div>

Javascript Code:

<script>
window.onload=function(){
alert(document.getElementById("dd").style.height);
    }
</script>

弹出框结果为空！Why?

现在，还是原来的javascript代码，我将CSS和XHMTL代码稍微一下：

CSS Code:

<style type="text/css">
#dd{ background:green; padding:10px; border:10px solid red; }
</style>

Xhtml Code :(将宽和高的样式写在这里)

<div id="dd" style="width:100px; height:100px;" >dd</div>

弹出框结果为100px！，Why ??

难道与CSS权重有关？百思不得其解！先记录下来，以后找答案！