js如何獲取指定元素的尺寸

在網頁應用中，經常需要獲得指定元素的尺寸，方法有多種，並且在不同的情況下需要用不同的方法，下面就簡單介紹一下這方面的應用，希望能夠給需要的朋友帶來一定的幫助。

一.使用style屬性:

使用style獲取元素的尺寸，例如

[HTML] 純文字檢視 複製程式碼
<div style="width:100px;height:100px;"></div>

上面是一個div元素，下面就通過style獲取它的尺寸值:

[JavaScript] 純文字檢視 複製程式碼
var thediv=document.getElementById("thediv");
  console.log(thediv.style.height);
  console.log(thediv.style.width);

以上程式碼可以輸出div的高度和寬度。

需要注意的是，使用style獲取的只能是使用style=""這種形式設定的樣式屬性。

使用style可以獲取元素的樣式值，也可以設定元素樣式屬性值，例如:

[JavaScript] 純文字檢視 複製程式碼
thediv.style.height="200px"

以上程式碼可以div的高度設定為200px。

二.使用getComputedStyle()和currentStyle：

style雖然可以獲得尺寸，但是不能夠獲取以下形式設定的樣式:

[CSS] 純文字檢視 複製程式碼
#thediv{
  width:100px;
  height:100px;
}

通過內部樣式表設定的屬性。

[HTML] 純文字檢視 複製程式碼
<link rel="stylesheet" type="text/css" href="css.css" />

引入的外部樣式表定義的元素屬性。

以上兩種方式定義的樣式屬性值，style屬性就無法獲取了，下面就只能夠使用其他方式獲取，這裡就不多介紹了，具體可以參閱js如何獲取非內部取樣式表中定義的屬性值一章節。

三.offsetWidth和offsetHeight屬性獲取:

使用offsetWidth和offsetHeight同樣可以獲取指定元素的尺寸，這裡就不多介紹了，具體可以參閱scrollTop、offsetHeight和offsetTop等屬性用法詳解一章節。不過需要特別注意的是，上面兩個屬性的返回值是不帶單位的。