Get element height when style = auto or 100%?

element, javascript, styles

Solution

You could do it with pure javascript like this :

Javascript

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

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

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

}

With jQuery library it's easier :

JQuery

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

Edit

Now with many elements within a container :

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>

I changed your opacity to visibility for compatibility purposes. Don't use display:none; or the height parsing will fail ;).

JQuery

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

See fiddle to see it working.

Problem

Just as the questions asks how may I get the exact px height or width of an element when that element has style="width:100%; height:auto;" for example. I may NOT nest it inside a div and get the height/width via so! I'm guessing javascript can help out here. EDIT: I am using this: ``` var collectNodes = document.getElementById('fade').children; collectNodes[y].height() // ?? ``` The following code provides me with the string "auto": ``` collectNodes[0].style.height; ``` EDIT2: This is my code. ``` <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> ```

Original source