Question

How can I get the width and height of a div element?

for instance,

<div style="width:100px;height:100px;overflow:hidden; float:left; margin:0px 0px 5px 0px; border:1px solid #000;">
    <img src="daisy_03_20110712163828_extra.jpg" alt="daisy_03_20110712163828_extra.jpg" width="800" height="589" id="preview"/>
</div>

I tried with this method,

var previewwidth = $("#preview").css('width');
var previewheight = $("#preview").css('height');

But I get 800px which is the width of the image instead!

I want to get the 100 as number actually.

Answer 1

You’re using $("#preview") which will return the img since the img tag is the one with id="preview"

First option:

$("#preview").parent().css('width');

Second, better option:

Give the div an id, say “foofoo”:

<div id="foodoo">...</div>
$("#foofoo").css('width');

To make it into an integer wrap in parseInt():

parseInt($("#foofoo").css('width'));