在 JavaScript 操作 DOM 的過程中我們可能需要經(jīng)常獲取一個元素的大小癣朗，在處理鼠標(biāo)事件的時候可能需要知道當(dāng)前鼠標(biāo)的點(diǎn)擊位置财松，所以我將我在開發(fā)過程中使用的一些相關(guān)屬性記錄下來奋单。
1. 偏移量
如果我們想知道一個元素相對于其父元素的偏移量镜硕，可以用以下幾個屬性獲取到我們想要的數(shù)值哥桥。
-
offsetHeight： 元素在垂直方向上占用的空間大小岁钓，包括元素內(nèi)容的高度佃扼，內(nèi)邊距的高度以及邊框的高度偎巢。 -
offsetWidth： 元素在水平方向上占用的空間大小，包括元素的寬度兼耀，內(nèi)邊距的寬度以及邊框的寬度压昼。 -
offsetLeft： 元素的左外邊框到父元素的左內(nèi)邊框的距離。 -
offsetTop: 元素的上外邊框到父元素的上內(nèi)邊框的距離瘤运。 -
offsetParent： 當(dāng)前元素的父元素窍霞。
如果想計算出一個元素相對于整個頁面的偏移量，那我們可以使用 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;
}
當(dāng)然，如果想獲取一個元素相對于整個頁面的 offsetTop郁季，也可以使用同樣的方式冷溃。
2. 客戶區(qū)大小
有的時候我們想要知道用戶的瀏覽器到底有多寬，有多高梦裂，這就需要借助于 clientWidth 和 clientHeight 了似枕。clientWidth 返回的是元素的內(nèi)容寬度與內(nèi)邊距寬度相加之和，clientHeight 返回的是元素的的內(nèi)容高度與內(nèi)邊距高度相加之和年柠。
可見凿歼，相比于上面介紹的 offsetWidth 和 offsetHeight，clientHeight 和 clientWidth 省略了邊框的寬度冗恨。所以其實(shí)我們可以通過這兩種方式計算用戶的瀏覽器視口大小答憔。
function getViewPort() {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
};
}
當(dāng)然，我們也可以使用另一種方式
function getViewPort() {
return {
width: document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
};
}
不過值得注意的是派近，這兩種方法是存在差異的攀唯，當(dāng) html 元素沒有充滿整個瀏覽器視口的時候，使用偏移量的方法會返回 html 的實(shí)際高度和寬度渴丸，而 clientWidth 和 clientHeight 會返回當(dāng)前瀏覽器的可見區(qū)域大小侯嘀，所以說對于 html 未充滿屏幕的時候，我們想達(dá)到計算瀏覽器視口大小的功能谱轨，也可以添加如下 CSS 代碼戒幔。
html, body {
height: 100%;
}
3. 滾動大小
當(dāng)實(shí)現(xiàn)瀑布流的時候可能會用到滾動屬性，因?yàn)槲覀兊臄?shù)據(jù)不是一次性就加載完畢的土童，而是隨著用戶的滾動而動態(tài)的加載數(shù)據(jù)诗茎。下面是四個與滾動大小有關(guān)的屬性。
-
scrollHeight: 如果在沒有滾動條的情況下，該屬性和clientHeight返回值相同敢订，即內(nèi)容的高度與內(nèi)邊距的高度之和王污，不包含邊框高度。如果存在滾動條楚午，該屬性等于scrollTop+clientHeight -
scrollWidth: 計算方式和scrollHeight相同昭齐。 -
scrollTop： 被隱藏在內(nèi)容區(qū)域上方的像素數(shù)，通過這個屬性可以設(shè)置元素的滾動位置矾柜。說直白點(diǎn)這個屬性的值就是元素的總高度 - 元素的內(nèi)容寬度 - 元素的padding阱驾。 -
scrollLeft: 被隱藏在內(nèi)容區(qū)域左方的像素數(shù)，通過這個屬性可以設(shè)置元素的滾動位置怪蔑。
不過值得注意的是, 如果我們想取得當(dāng)前頁面的滾動位置時里覆，在 Opera, Chrome 都可以通過 document.body.scrollTop 來獲取，但是這個方法在 Firefox 需要通過 document.documentElement.scrollTop 來獲取缆瓣。所以我們可以投機(jī)取巧的采用以下方法獲取當(dāng)前瀏覽器的滾動位置喧枷。
function getScrollTop() {
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
return scrollTop;
}
4. 關(guān)于位置
-
clientX和clientY是相對于視口的位置。 -
pageX和pageY在沒有滾動的情況下和clientX弓坞， clientY是相等的割去，如果包含滾動的話，pageX = clientX + scrollLeft,pageY = clientY + scrollTop昼丑。 -
screenX和screenY就不是相對于瀏覽器視口的位置了，而是相對于用戶的整個計算機(jī)屏幕夸赫。
