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

【问题标题】：How can I get the width and height of a div element with jquery?如何使用 jquery 获取 div 元素的宽度和高度？
【发布时间】：2011-07-12 17:12:56
【问题描述】：

如何获取 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。

【问题讨论】：

标签： jquery css width parseint

【解决方案1】：

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

【讨论】：

我同意，这样做有利于使用不必要的父选择器减慢速度。

【解决方案2】：

有 3 种可能的方法来做到这一点：

一个：

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

二：

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

这将不包括边距、内边距和边框。

三：

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

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

【讨论】：

但是，如前所述，给 div 一个 id 仍然会更好

【解决方案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'));

【讨论】：

使用.css() 将给出一个字符串而不是数字的结果。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

【讨论】：