在 JavaScript 操作 DOM 的過程中我們可能需要經常獲取一個元素的大小，在處理鼠標事件的時候可能需要知道當前鼠標的點擊位置，所以我將我在開發(fā)過程中使用的一些相關屬性記錄下來。
1. 偏移量
如果我們想知道一個元素相對于其父元素的偏移量，可以用以下幾個屬性獲取到我們想要的數(shù)值。
-
offsetHeight： 元素在垂直方向上占用的空間大小，包括元素內容的高度，內邊距的高度以及邊框的高度。 -
offsetWidth： 元素在水平方向上占用的空間大小，包括元素的寬度，內邊距的寬度以及邊框的寬度。 -
offsetLeft： 元素的左外邊框到父元素的左內邊框的距離。 -
offsetTop: 元素的上外邊框到父元素的上內邊框的距離。 -
offsetParent： 當前元素的父元素。
如果想計算出一個元素相對于整個頁面的偏移量，那我們可以使用 offsetParent 協(xié)助完成，比如獲取一個元素相對于頁面的 offsetLeft。
function getLeft(element) {
var left = element.offsetLeft;
var current = element.offsetParent;
while(current !== null) {
left += current.offsetLeft;
current = current.offsetParent;
}
return left;
}
當然，如果想獲取一個元素相對于整個頁面的 offsetTop，也可以使用同樣的方式。
2. 客戶區(qū)大小
有的時候我們想要知道用戶的瀏覽器到底有多寬，有多高，這就需要借助于 clientWidth 和 clientHeight 了。clientWidth 返回的是元素的內容寬度與內邊距寬度相加之和，clientHeight 返回的是元素的的內容高度與內邊距高度相加之和。
可見，相比于上面介紹的 offsetWidth 和 offsetHeight，clientHeight 和 clientWidth 省略了邊框的寬度。所以其實我們可以通過這兩種方式計算用戶的瀏覽器視口大小。
function getViewPort() {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
};
}
當然，我們也可以使用另一種方式
function getViewPort() {
return {
width: document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
};
}
不過值得注意的是，這兩種方法是存在差異的，當 html 元素沒有充滿整個瀏覽器視口的時候，使用偏移量的方法會返回 html 的實際高度和寬度，而 clientWidth 和 clientHeight 會返回當前瀏覽器的可見區(qū)域大小，所以說對于 html 未充滿屏幕的時候，我們想達到計算瀏覽器視口大小的功能，也可以添加如下 CSS 代碼。
html, body {
height: 100%;
}
3. 滾動大小
當實現(xiàn)瀑布流的時候可能會用到滾動屬性，因為我們的數(shù)據(jù)不是一次性就加載完畢的，而是隨著用戶的滾動而動態(tài)的加載數(shù)據(jù)。下面是四個與滾動大小有關的屬性。
-
scrollHeight: 如果在沒有滾動條的情況下，該屬性和clientHeight返回值相同，即內容的高度與內邊距的高度之和，不包含邊框高度。如果存在滾動條，該屬性等于scrollTop+clientHeight -
scrollWidth: 計算方式和scrollHeight相同。 -
scrollTop： 被隱藏在內容區(qū)域上方的像素數(shù)，通過這個屬性可以設置元素的滾動位置。說直白點這個屬性的值就是元素的總高度 - 元素的內容寬度 - 元素的padding。 -
scrollLeft: 被隱藏在內容區(qū)域左方的像素數(shù)，通過這個屬性可以設置元素的滾動位置。
不過值得注意的是, 如果我們想取得當前頁面的滾動位置時，在 Opera, Chrome 都可以通過 document.body.scrollTop 來獲取，但是這個方法在 Firefox 需要通過 document.documentElement.scrollTop 來獲取。所以我們可以投機取巧的采用以下方法獲取當前瀏覽器的滾動位置。
function getScrollTop() {
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
return scrollTop;
}
4. 關于位置
-
clientX和clientY是相對于視口的位置。 -
pageX和pageY在沒有滾動的情況下和clientX， clientY是相等的，如果包含滾動的話，pageX = clientX + scrollLeft,pageY = clientY + scrollTop。 -
screenX和screenY就不是相對于瀏覽器視口的位置了，而是相對于用戶的整個計算機屏幕。
