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

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 = $("#pr开发者_运维问答eview").css('height');

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

I want to get the 100 as number actually.

Give the div an id, and use that instead of the id of your image.

There are 3 potential methods of doing this:

One:

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

Two:

$("#preview").parent().width();
$("#preview").parent().height();

This will not include margins, padding and border.

Three:

$("#preview").parent().outerWidth();
$("#preview").parent().outerHeight();

This will include the padding, border, and optionally margin. To include margin you must add true in the function, i.e. .outerHeight(true).

• height
• width
• outerHeight
• outerWidth

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'));

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

You can use height() and width(). Look at the API for these sorts of questions..

Also, as pointed out above, your selector isn't correct.

You can do this simply like that (jsfiddle as an example):

var mydiv = jQuery('#preview').parent('div');
var mywidth = mydiv.width();
var myheight = mydiv.height();

preview is the ID of your image so of course your code is returning the size of the image. Just give your div a different unique ID, and use that instead of #preview in your jQuery selector.

<div id="myDiv" 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>

The following will return the width/height of the div as "100px":

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

And to get the result as a unit-less number instead of a string:

var previewwidth = $("#myDiv").width();
var previewheight = $("#myDiv").height();