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