javascript - 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

Why not just alert(object.style.height)?

Anyway, the reason it doesn't work is because elem.style.property only works with inline style="..." attributes. To take into account all styles, you need this:

alert(window.getComputedStyle(object).height)

Older versions of IE don't support this, but it's a very easy shim:

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);

这是描述： MDN 上的 offsetHeight

Answer 4

使用 JQuery：

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

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

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

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