style = auto 或 100% 时获取元素高度？

正如问题所问，当元素具有 style="width:100%; height:auto;" 时，如何获得该元素的确切 px 高度或宽度例如。

我可能不会将它嵌套在 div 内并通过 so 获取高度/宽度！

我猜 javascript 可以在这里提供帮助。

编辑：我正在使用这个：

var collectNodes = document.getElementById('fade').children;

collectNodes[y].height() // ??

以下代码为我提供了字符串“auto”：

collectNodes[0].style.height;

EDIT2：这是我的代码。

<div id="divId">
    <img class="node" src="somePic0.png" style="z-index:10; opacity:0;"/>
    <img class="node" src="somePic1.png" style="z-index:9; opacity:0;"/>
    <img class="node" src="somePic2.png" style="z-index:8; opacity:1;"/> 
    <img class="node" src="somePic3.png" style="z-index:7; opacity:1;"/>
    <img class="node" src="somePic4.png" style="z-index:6; opacity:1;"/>
</div>

<script>
    var collectNodes = document.getElementById('divId').children; 
    var y = 0;
    for ( var x = 0; x < collectNodes.length; x++ ) {
        if ( collectNodes[x].style.opacity !== "" && !y ) {
            y = x;
        }
    }

    alert(collectNodes[y].height); // This alerts the string "auto" and not pixel height
</script>

你可以用纯 JavaScript 来做到这一点，如下所示：

JavaScript

var divHeight;
var obj = document.getElementById('id_element');

if(obj.offsetHeight) {
    divHeight=obj.offsetHeight;

} else if(obj.style.pixelHeight) {
    divHeight=obj.style.pixelHeight;

}

使用 jQuery 库更容易：

JQuery

var height = $('#element').height();

Edit

现在容器中有许多元素：

Html

<div id="divId">
    <img class="node" src="path/to/pic" style="z-index:10; opacity:0;"/>
    <img class="node" src="path/to/pic" style="z-index:9; opacity:0;"/>
    <img class="node" src="path/to/pic" style="z-index:8; opacity:1;"/> 
    <img class="node" src="path/to/pic" style="z-index:7; opacity:1;"/>
    <img class="node" src="path/to/pic" style="z-index:6; opacity:1;"/>
</div>

出于兼容性目的，我将您的不透明度更改为可见性。不要使用显示：无；否则高度解析将会失败;)。

JQuery

$("#divId img").each(function(index, picture) {
   var height = $(picture).height();
   //Do everything you want with the height from the image now
});

See fiddle http://jsfiddle.net/soyuka/X7vGR/4/看看它是否有效。