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>

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>

• javascript
• styles
• element

• Are you using jquery or another library or should it be in plain javascript? – Jaco Koster Commented Mar 7, 2013 at 17:05
• Whichever one :) I Prefer jQuery, but javascript would work just aswell! – basickarl Commented Mar 7, 2013 at 17:06

1 Answer 1

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 patibility 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.