Question

53

Get element height when style = auto or 100%?

rated 0 times [ 59] [ 6] / answers: 1 / hits: 21493 / 11 Years ago, thu, march 7, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mikael

Add To Favorites

Follow

Total Points: 73

Total Questions: 115

Total Answers: 86

Location: Central African Republic

Member since Mon, Aug 10, 2020

4 Years ago

answered 11 Years ago kylanalis · Accepted Answer

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.