如何檢索HTML元素的實際寬度和高度？

579

假設我有一個<div>，我希望在瀏覽器的顯示（視口）中居中。爲此，我需要計算<div>元素的寬度和高度。如何檢索HTML元素的實際寬度和高度？

我應該使用什麼？請包含瀏覽器兼容性的信息。

2008-11-16 snortasprocket

請記住，通過**任何方法獲取元素的高度總是會對性能產生影響**，因爲它會使瀏覽器重新計算頁面中所有元素的位置（重排）。因此，避免做太多。簽出[此列表]（https://gist.github.com/paulirish/5d52fb081b3570c81e3a）是什麼樣的事情觸發迴流。 – 2016-12-05 03:16:25

873

您應該使用.offsetWidth和.offsetHeight屬性。請注意，它們屬於該元素，而不是.style。

var width = document.getElementById('foo').offsetWidth;

來源

2008-11-16 19:35:11 Greg

+133

小心！如果您最近對元素進行了某些DOM修改，則offsetHeight/offsetWidth可以返回0。修改元素後，您可能必須在setTimeout調用中調用此代碼。 – 2010-01-19 05:59:08

+24

關於`.offsetWidth`和`.offsetHeight`的文檔：https：//developer.mozilla.org/en/Determining_the_dimensions_of_elements – 2011-10-22 23:19:40

+23

它在什麼情況下返回0？ – Cheetah 2012-02-22 23:22:51

注意：這個答案是在2008年寫的。當時最適合大多數人的最好的跨瀏覽器解決方案是使用jQuery。我將留下的答案留給子孫後代，如果你使用jQuery，這是一個很好的方法。如果您使用其他框架或純JavaScript，接受的答案可能是要走的路。

在jQuery 1.2.6可以使用核心CSS functions，height和width（或outerHeight和outerWidth，適當時）中的一個。

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

var docHeight = $(document).height(); 
var docWidth = $(document).width();

來源

2008-11-16 19:29:19 tvanfosson

element.offsetWidth和element.offsetHeight應該做的，因爲在以前的帖子建議。

但是，如果您只想將內容居中，那麼有更好的方法。假設你使用xhtml嚴格的DOCTYPE。設置邊距：0，自動屬性和px中所需的寬度爲body標籤。內容中心與頁面對齊。

來源

2008-11-16 19:50:32 questzen

你只需要計算IE7和更舊的版本（並且只有當你的內容沒有固定大小時）。我建議使用HTML條件註釋來限制對不支持CSS2的舊IE的破解。對於所有其他瀏覽器使用此：

<style type="text/css"> 
    html,body {display:table; height:100%;width:100%;margin:0;padding:0;} 
    body {display:table-cell; vertical-align:middle;} 
    div {display:table; margin:0 auto; background:red;} 
</style> 
<body><div>test<br>test</div></body>

這是一個完美的解決方案。它以任何大小的中心<div>爲中心，並將其縮小爲其內容的大小。

來源

2008-11-16 20:57:23 Kornel

你也可以使用此代碼：如果offsetWidth返回0

var divID = document.getElementById("divid"); 

var h = divID.style.pixelHeight;

來源

2009-03-25 11:24:32

...似乎CSS幫助把DIV的中心......

<style> 
.monitor { 
position:fixed;/* ... absolute possible if on :root */ 
top:0;bottom:0;right:0;left:0; 
visibility:hidden; 
} 
.wrapper { 
width:200px;/* this is size range */ 
height:100px; 
position:absolute; 
left:50%;top:50%; 
visibility:hidden; 
} 

.content { 
position:absolute; 
width: 100%;height:100%; 
left:-50%;top:-50%; 
visibility:visible; 
} 

</style> 

<div class="monitor"> 
    <div class="wrapper"> 
    <div class="content"> 

... so you hav div 200px*100px on center ... 

    </div> 
</div> 
</div>

來源

2012-03-01 00:21:40 sanecin

-3

，你可以得到元素的樣式寬度財產並搜索它的數量。「100像素」 - > 100

/\d*/.exec(MyElement.style.width）

來源

2015-03-04 14:12:30 Arko

101

看看Element.getBoundingClientRect()。

此方法將返回包含width，height，和其他一些有用的值對象：

{ 
    width: 960, 
    height: 71, 
    top: 603, 
    bottom: 674, 
    left: 360, 
    right: 1320 
}

例如：

var element = document.getElementById('foo'); 
var positionInfo = element.getBoundingClientRect(); 
var height = positionInfo.height; 
var width = positionInfo.width;

我相信這不會有問題，那.offsetWidth和.offsetHeight他們有時會返回0（如comments here中所述）

另一個區別是getBoundingClientRect()可能會返回小數像素，其中.offsetWidth和.offsetHeight將舍入爲最接近的整數。

IE8注意：getBoundingClientRect上IE8及以下不返回的高度和寬度*

如果必須支持IE8，使用.offsetWidth和.offsetHeight：

var height = element.offsetHeight; 
var width = element.offsetWidth;

參考：

.offsetHeight：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
.offsetWidth：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
.getBoundingClientRect()：https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

來源

2015-09-18 18:37:04

以防萬一它是有用的人，我把一個文本框，按鈕和DIV都具有相同的CSS ：

width:200px; 
height:20px; 
border:solid 1px #000; 
padding:2px; 

<input id="t" type="text" /> 
<input id="b" type="button" /> 
<div id="d"></div>

我在Chrome，Firefox和ie-edge上試過它，我嘗試過使用jquery而沒有使用它，並且我嘗試使用它並且沒有使用box-sizing:border-box。總是與<!DOCTYPE html>

結果：

               Firefox  Chrome  IE-Edge  
                   with w/o with w/o with w/o  box-sizing 

$("#t").width()            194 200 194 200 194 200 
$("#b").width()            194 194 194 194 194 194 
$("#d").width()            194 200 194 200 194 200 

$("#t").outerWidth()           200 206 200 206 200 206 
$("#b").outerWidth()           200 200 200 200 200 200 
$("#d").outerWidth()           200 206 200 206 200 206 

$("#t").innerWidth()           198 204 198 204 198 204 
$("#b").innerWidth()           198 198 198 198 198 198 
$("#d").innerWidth()           198 204 198 204 198 204 

$("#t").css('width')           200px 200px 200px 200px 200px 200px 
$("#b").css('width')           200px 200px 200px 200px 200px 200px 
$("#d").css('width')           200px 200px 200px 200px 200px 200px 

$("#t").css('border-left-width')        1px 1px 1px 1px 1px 1px 
$("#b").css('border-left-width')        1px 1px 1px 1px 1px 1px 
$("#d").css('border-left-width')        1px 1px 1px 1px 1px 1px 

$("#t").css('padding-left')         2px 2px 2px 2px 2px 2px 
$("#b").css('padding-left')         2px 2px 2px 2px 2px 2px 
$("#d").css('padding-left')         2px 2px 2px 2px 2px 2px 

document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206 
document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200 
document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206 

document.getElementById("t").offsetWidth      200 206 200 206 200 206 
document.getElementById("b").offsetWidth      200 200 200 200 200 200 
document.getElementById("d").offsetWidth      200 206 200 206 200 206

來源

2016-02-19 12:52:13 Graham

根據MDN: Determining the dimensions of elements

offsetWidth和offsetHeight返回「的空間中的元件佔據總量，包括可見內容的寬度，滾動條（如果有的話），填充和邊框「

clientWidth和clientHeight返回」實際顯示的內容佔用多少空間，inc瀘定填充但不包括邊框，邊距或滾動條」

scrollWidth和scrollHeight返回‘內容的實際大小，不管量有多大，目前可見的，你需要使用’

所以這取決於測量的內容是否預計超出當前可視區域。

來源

2018-03-01 20:38:01 HarlemSquirrel

如何檢索HTML元素的實際寬度和高度？

回答

相關問題