如何使用 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

有 3 種潛在的方法可以做到這一點：

一：

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

二：

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

這將不包括邊距、填充和邊框。

三：

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

這將包括填充、邊框和可選的邊距。 要包括邊距，您必須在 function 中添加true ，即.outerHeight(true) 。

• 高度
• 寬度
• 外高
• 外寬

Answer 3

您正在使用$("#preview")它將返回 img，因為 img 標簽是id="preview"的標簽

第一個選項：

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

第二，更好的選擇：

給 div 一個 id，說“foofoo”：

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

要使其成為 integer包裝在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();