JavaScript：无法提醒输出值

Question

代码非常简单。

HTML：

<div class="simpleDiv" id="Child1" onmouseover="expandDiv(this);"></div>

CSS：

.simpleDiv {
    background-color: red; 
    width: 100px; 
    height: 50px; 
    margin: 5px; 
    margin-left: 50px; 
    opacity: 1;
}   

JavaScript的：

function expandDiv(object){
    alert(document.getElementById(object.id).style.height);
} 

为什么我无法像这样警告div的高度？如果我使用函数hasAttribute警告id或类，那可以正常工作但不能提醒元素的css属性。

任何帮助表示赞赏！

Answer 1

为什么不只是alert(object.style.height)？

无论如何，它不起作用的原因是因为elem.style.property仅适用于内联style="..."属性。要考虑所有样式，您需要：

alert(window.getComputedStyle(object).height)

较旧版本的IE不支持此功能，但它是一个非常简单的垫片：

window.getComputedStyle = window.getComputedStyle || function(e) {return e.currentStyle;};

Answer 2

function expandDiv(object){



    alert(document.getElementById(object.id).innerHeight);

}

Answer 3

尝试使用：

alert(document.getElementById(object.id).offsetHeight);

以下是说明： offsetHeight on MDN

Answer 4

使用JQuery：

 alert($('#Child1').css("height");

或者要更改属性，请使用：

$('#Child1').css("height", value )

如果您不想要JQuery，请忽略。