DOM 元素尺寸與位置

作者：華清遠見講師

一.擷取元素CSS大小

1.通過style擷取元素的大小

varbox = document.getElementById('box'); //擷取元素

box.style.width;

box.style.height;

PS：style擷取隻能擷取到行内style屬性的CSS樣式中的寬和高，如果有，擷取;如果沒有，則傳回空。

2.通過計算擷取元素的大小

varstyle = window.getComputedStyle ?

window.getComputedStyle(box,null) : null || box.currentStyle;

style.width; //1424px、200px、auto

style.height; //18px、200px、auto

PS：通過計算擷取元素的大小，無關你是否是行内、内聯或者連結，它經過計算後得到的結果傳回出來。如果本身設定大小，它會傳回元素的大小，如果本身沒有設定，非IE浏覽器會傳回預設的大小，IE浏覽器傳回auto。

3.通過CSSStyleSheet對象中的cssRules(或rules)屬性擷取元素大小

var sheet =document.styleSheets[0]; //擷取link或style

var rule = (sheet.cssRules ||sheet.rules)[0]; //擷取第一條規則

rule.style.width;

rule.style.height;

PS：cssRules(或rules)隻能擷取到内聯和連結樣式的寬和高，不能擷取到行内和計算後的樣式。

總結：以上的三種CSS擷取元素大小的方法，隻能擷取元素的CSS大小，卻無法擷取元素本身實際的大小。比如加上了内邊距(padding)、外邊距(margin)、邊框(border)、滾動條(scroll)之後的大小

二.擷取元素實際大小

測試代碼：

HTML部分：

測Div測試Div測試Div測試Div測試Div測試Div測試Div測試Div

測試Div測試Div測試Div測試Div測試Div測試Div測試Div測試Div

測試Div測試Div測試Div測試Div測試Div測試Div測試Div測試Div

測試Div測試Div測試Div測試Div測試Div測試Div測試Div測試Div

測試Div測試Div測試Div測試Div測試Div測試Div測試Div測試Div

測試Div測試Div測試Div測試Div測試Div測試Div測試Div測試Div

測試Div測試Div測試Div測試Div測試Div測試Div測試Div測試Div

測試Div測試Div測試Div測試Div測試Div測試Div測試Div測試Div

CSS部分：

#box{

width:200px;

height:200px;

background:red;

overflow:scroll;

}

1.clientWidth和clientHeight

這組屬性可以擷取元素可視區的大小，可以得到元素内容及内邊距所占據的空間大小。

box.clientWidth; //200

box.clientHeight; //200

PS：傳回了元素大小，但沒有機關，預設機關是px，如果設定了其他的機關，比如100em之類，傳回出來的結果還會轉換為px像素。(CSS擷取的話，是照着你設定的樣式擷取)。

PS：對于元素的實際大小，clientWidth和clientHeight了解方式如下：

1.增加邊框，無變化，為200;

2.增加外邊距，無變化，為200;

3.增加滾動條，最終值等于原本大小減去滾動條的大小，為184;

4.增加内邊距，最終值等于原本大小加上内邊距的大小，為220;

PS：如果說沒有設定任何CSS的寬和高度，那麼非IE浏覽器會算上滾動條和内邊距的計算後的大小，而IE浏覽器則傳回0。

2.scrollWidth和scrollHeight

這組屬性可以擷取滾動内容的元素大小。

box.scrollWidth; //200

box.scrollWidth; //200

PS：傳回了元素大小，預設機關是px。如果沒有設定任何CSS的寬和高度，它會得到計算後的寬度和高度。

PS：對于元素的實際大小，scrollWidth和scrollHeight了解如下

1.增加邊框，不同浏覽器有不同解釋：

a) Firefox和Opera浏覽器會增加邊框的大小，220 x 220

b) Chrome和Safari浏覽器會忽略邊框大小，200 x 200

c) IE浏覽器忽略邊框并且隻顯示它有效内容的高度，200 x 18(單個“測試 Div”的高度為18)

2.增加内邊距，最終值會等于原本大小加上内邊距大小，220 x 220，IE為220x 38

3.增加滾動條，最終值會等于原本大小減去滾動條大小，184 x 184，IE為184x 18

4.增加外邊據，無變化。

5.增加内容溢出(若果沒有滾動條，不同浏覽器相容不同，是以加上滾動條overflow:scroll;)，Firefox、Chrome和IE擷取實際内容高度，Opera比前三個浏覽器擷取的高度偏小，Safari比前三個浏覽器擷取的高度偏大。

3.offsetWidth和offsetHeight(穩定，使用頻率高!)

這組屬性可以傳回元素實際大小，包含邊框、内邊距和滾動條。

box.offsetWidth; //200

box.offsetHeight; //200

PS：傳回了元素大小，預設機關是px。如果沒有設定任何CSS的寬和高度，他會得到計算後的寬度和高度。

PS：對于元素的實際大小，offsetWidth和offsetHeight了解如下：

1.增加邊框，最終值會等于原本大小加上邊框大小，為220;

2.增加内邊距，最終值會等于原本大小加上内邊距大小，為220;

3.增加外邊據，無變化;

4.增加滾動條，無變化，不會減小;

HTML部分：

測試Div

CSS部分：

#box{

width:200px;

height:200px;

background:red;

}

PS：對于元素大小的擷取，一般是塊級(block)元素并且以設定了CSS大小的元素較為友善。如果是内聯元素(inline)或者是沒有設定大小的元素就尤為麻煩，是以，建議使用的時候注意。

三.擷取元素周邊大小

1.clientLeft和clientTop

這組屬性可以擷取元素設定了左邊框和上邊框的大小。

box.clientLeft; //擷取左邊框的長度

box.clientTop; //擷取上邊框的長度

PS：目前隻提供了Left和Top這組，并沒有提供Right和Bottom。如果四條邊寬度不同的話，可以直接通過計算後的樣式擷取，或者采用以上三組擷取元素大小的減法求得。

2.offsetLeft和offsetTop

這組屬性可以擷取目前元素相對于父元素的位置。

box.offsetLeft;

box.offsetTop;

PS：擷取元素目前相對于父元素的位置，最好将此元素設定為絕對定位position:absolute;否則不同的浏覽器會有不同的解釋。

PS：加上邊框和内邊距不會影響它的位置，但加上外邊距會累加。

box.offsetParent; //得到父元素

PS：offsetParent中，如果本身父元素是，非IE傳回body對象，IE傳回html對象。如果兩個元素嵌套，如果父元素沒有使用定位position:absolute，那麼offsetParent将傳回body對象或html對象。是以，在擷取offsetLeft和offsetTop時候，CSS定位很重要。

如果說，在很多層次裡，外層已經定位，我們怎麼擷取裡層的元素距離body或html元素之間的距離呢?也就是擷取任意一個元素距離頁面上的位置。那麼我們可以編寫函數，通過不停的向上回溯擷取累加來實作。代碼如下：

//隻有兩層的情況下:

box.offsetTop+ box.offsetParent.offsetTop;

//如果多層的話，就必須使用循環或遞歸:

function offsetLeft(element) {

var left = element.offsetLeft; //得到第一層距離

var parent = element.offsetParent; //得到第一個父元素

while (parent !== null) { //如果還有上一層父元素

left += parent.offsetLeft; //把本層的距離累加

parent = parent.offsetParent; //得到本層的父元素

} //然後繼續循環

return left;

}

3.scrollTop和scrollLeft

這組屬性可以擷取滾動條被隐藏的區域大小，也可設定定位到該區域。

box.scrollTop; //擷取滾動内容上方的位置(就是隐藏的内容的高度)

box.scrollLeft; //擷取滾動内容左方的位置

如果要讓滾動條滾動到最初始的位置，那麼可以寫一個函數：

functionscrollStart(element) {

if (element.scrollTop != 0) element.scrollTop = 0; //指派為0;

}