CODEWITHSUNDEEP
jquerycsswidthparseint
Run
Run

Reputation: 57286

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 = $("#preview").css('height');

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

I want to get the 100 as number actually.

Upvotes: 3

Views: 485

Answers (7)

Sparky
Sparky

Reputation: 98758

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

Upvotes: 0

tybro0103
tybro0103

Reputation: 49743

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

Upvotes: 2

Tadeck
Tadeck

Reputation: 137450

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

Upvotes: 0

MacMac
MacMac

Reputation: 35361

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

Upvotes: 3

Jose Faeti
Jose Faeti

Reputation: 12314

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

Upvotes: 1

Radu
Radu

Reputation: 8699

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.

Upvotes: 0

Paul Sonier
Paul Sonier

Reputation: 39520

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

Upvotes: 3

Related Questions