3

如何获取 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的是图像的宽度！

我想得到100asnumber实际上。

4

7 回答 7

3

有 3 种潜在的方法可以做到这一点：

一：

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

二：

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

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

三：

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

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

于 2011-07-12T17:21:36.300 回答
3

给 div 一个 id，并使用它来代替图像的 id。

于 2011-07-12T17:15:27.803 回答
2

您正在使用$("#preview")which 将返回 img ，因为 img 标签是带有id="preview"

第一个选项：

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

第二，更好的选择：

给 div 一个 id，说“foofoo”：

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

要将其转换为整数换行parseInt()：

parseInt($("#foofoo").css('width'));
于 2011-07-12T17:14:32.137 回答
1 
var previewwidth = $("#preview").parent().width();
var previewheight = $("#preview").parent().height();
于 2011-07-12T17:16:44.430 回答
0

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

<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();
于 2011-07-12T17:22:05.743 回答
0

您可以像这样简单地执行此操作（以 jsfiddle为例）：

var mydiv = jQuery('#preview').parent('div');
var mywidth = mydiv.width();
var myheight = mydiv.height();
于 2011-07-12T17:28:43.803 回答
0

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

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

于 2011-07-12T17:16:23.260 回答