如何用jquery获取div元素的宽度和高度？

Question

如何获得div元素的宽度和高度？

例如，

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

我试过这个方法，

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

但我得到800px，而不是图像的宽度！

我希望100实际上为number。

Answer 1

给div一个id，并使用它而不是图像的id。

Answer 2

有三种可能的方法：

一：

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

两个

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

这将不包括边距，填充和边框。

三：

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

这将包括填充，边框和可选的边距。要包含保证金，您必须在函数中添加true，即.outerHeight(true)。

• height
• width
• outerHeight
• outerWidth

Answer 3

您使用$("#preview")会返回img，因为img标记是id="preview"

的标记

第一个选项：

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

其次，更好的选择：

给div一个id，说“foofoo”：

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

将其变为整数换行parseInt()：

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

Answer 4

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

Answer 5

您可以使用height()和width()。查看API这些问题..

另外，如上所述，您的选择器不正确。

Answer 6

preview是图片的ID，因此您的代码当然会返回图片的大小。只需给你的div一个不同的唯一ID，并在jQuery选择器中使用它而不是#preview。

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

以下内容将div的宽度/高度返回为“100px”：

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

并将结果作为无单位数而不是字符串：

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

Answer 7

你可以这样做（jsfiddle作为例子）：

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