用JavaScript獲取DOM元素位置和尺寸大小的方法
在一些復(fù)雜的頁面中經(jīng)常會用JavaScript處理一些DOM元素的動態(tài)效果，這種時(shí)候我們經(jīng)常會用到一些元素位置和尺寸的計(jì)算，瀏覽器兼容性問題也是不可忽略的一部分，要想寫出預(yù)想效果的JavaScript代碼，我們需要了解一些基本知識。
基礎(chǔ)概念
為了方便理解，我們需要了解幾個(gè)基礎(chǔ)概念，每個(gè)HTML元素都有下列屬性
|
offsetWidth |
clientWidth |
scrollWidth |
|
offsetHeight |
clientHeight |
scrollHeight |
|
offsetLeft |
clientLeft |
scrollLeft |
|
offsetTop |
clientTop |
scrollTop |
為了理解這些屬性，我們需要知道HTML元素的實(shí)際內(nèi)容有可能比分配用來容納內(nèi)容的盒子更大，因此可能會出現(xiàn)滾動條，內(nèi)容區(qū)域是視口，當(dāng)實(shí)際內(nèi)容比視口大的時(shí)候，需要把元素的滾動條位置考慮進(jìn)去。
1. clientHeight和clientWidth用于描述元素內(nèi)尺寸，是指 元素內(nèi)容+內(nèi)邊距 大小，不包括邊框（IE下實(shí)際包括）、外邊距、滾動條部分
2. offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素內(nèi)容+內(nèi)邊距+邊框，不包括外邊距和滾動條部分
3. clientTop和clientLeft返回內(nèi)邊距的邊緣和邊框的外邊緣之間的水平和垂直距離，也就是左，上邊框?qū)挾?/P>
4. offsetTop和offsetLeft表示該元素的左上角（邊框外邊緣）與已定位的父容器（offsetParent對象）左上角的距離
5. offsetParent對象是指元素最近的定位（relative,absolute）祖先元素，遞歸上溯，如果沒有祖先元素是定位的話，會返回null
寫個(gè)小例子方便理解
<div id="divParent" style="padding: 8px; background-color: #aaa; position: relative;">
<div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
height: 200px; width: 200px; border: solid 3px #f00;">
</div>
</div>
<script type="text/javascript">
var div = document.getElementById('divDisplay');
var clientHeight = div.clientHeight;
var clientWidth = div.clientWidth;
div.innerHTML += 'clientHeight: ' + clientHeight + '<br/>';
div.innerHTML += 'clientWidth: ' + clientWidth + '<br/>';
var clientLeft = div.clientLeft;
var clientTop = div.clientTop;
div.innerHTML += 'clientLeft: ' + clientLeft + '<br/>';
div.innerHTML += 'clientTop: ' + clientTop + '<br/>';
var offsetHeight = div.offsetHeight;
var offsetWidth = div.offsetWidth;
div.innerHTML += 'offsetHeight: ' + offsetHeight + '<br/>';
div.innerHTML += 'offsetWidth: ' + offsetWidth + '<br/>';
var offsetLeft = div.offsetLeft;
var offsetTop = div.offsetTop;
div.innerHTML += 'offsetLeft: ' + offsetLeft + '<br/>';
div.innerHTML += 'offsetTop: ' + offsetTop + '<br/>';
var offsetParent = div.offsetParent;
div.innerHTML += 'offsetParent: ' + offsetParent.id + '<br/>';
</script>
效果如圖
從圖中我們可以看到，clientHeight就是div的高度+上下各10px的padding，clientWidth同理
而clientLeft和ClientTop即為div左、上邊框?qū)挾?/P>
offsetHeight是clientHeight+上下個(gè)3px的邊框?qū)挾戎停琽ffsetWidth同理
offsetTop是div 30px的 maggin+offsetparent 8px的 padding，offsetLeft同理
6. scrollWidth和scrollHeight是元素的內(nèi)容區(qū)域加上內(nèi)邊距加上溢出尺寸，當(dāng)內(nèi)容正好和內(nèi)容區(qū)域匹配沒有溢出時(shí)，這些屬性與clientWidth和clientHeight相等
7. scrollLeft和scrollTop是指元素滾動條位置，它們是可寫的
下面寫個(gè)簡單例子理解
<div id="divParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:auto;">
<div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
height: 400px; width: 200px; border: solid 3px #f00;">
</div>
</div>
<script type="text/javascript">
var divP = document.getElementById('divParent');
var divD = document.getElementById('divDisplay');
var scrollHeight = divP.scrollHeight;
var scrollWidth = divP.scrollWidth;
divD.innerHTML += 'scrollHeight: ' + scrollHeight + '<br/>';
divD.innerHTML += 'scrollWidth: ' + scrollWidth + '<br/>';
</script>
在FireFox和IE10（IE10以下版本盒模型和W3C標(biāo)準(zhǔn)不一致，不加討論，兼容性問題下面會介紹到）下得到結(jié)果scrollHeight: 494，而在Chrome和Safari下得到結(jié)果scrollHeight: 502，差了8px，根據(jù)8可以簡單推測是divParent的padding，來算一下是不是
我們可以看看它們的結(jié)果是怎么來的，首先scrollHeight肯定包含了divDisplay所需的高度 400px的高度+上下各10px的padding+上下各3px的border+上下各30px的margin，這樣
400+10*2+3*2+30*2=486
這樣486+8=494， 486+8*2=502果真是這樣，在FireFox和IE10下沒有計(jì)算下padding
有了這些基礎(chǔ)知識后，我們就可以計(jì)算元素的位置和尺寸了。
相對于文檔與視口的坐標(biāo)
當(dāng)我們計(jì)算一個(gè)DOM元素位置也就是坐標(biāo)的時(shí)候，會涉及到兩種坐標(biāo)系，文檔坐標(biāo)和視口坐標(biāo)。
我們經(jīng)常用到的document就是整個(gè)頁面部分，而不僅僅是窗口可見部分，還包括因?yàn)榇翱诖笮∠拗贫霈F(xiàn)滾動條的部分，它的左上角就是我們所謂相對于文檔坐標(biāo)的原點(diǎn)。
視口是顯示文檔內(nèi)容的瀏覽器的一部分，它不包括瀏覽器外殼（菜單，工具欄，狀態(tài)欄等），也就是當(dāng)前窗口顯示頁面部分，不包括滾動條。
如果文檔比視口小，說明沒有出現(xiàn)滾動，文檔左上角和視口左上角相同，一般來講在兩種坐標(biāo)系之間進(jìn)行切換，需要加上或減去滾動的偏移量（scroll offset）。
為了在坐標(biāo)系之間進(jìn)行轉(zhuǎn)換，我們需要判定瀏覽器窗口的滾動條位置。window對象的pageXoffset和pageYoffset提供這些值，IE 8及更早版本除外。也可以通過scrollLeft和scrollTop屬性獲得滾動條位置，正常情況下通過查詢文檔根節(jié)點(diǎn)（document.documentElement）來獲得這些屬性值，但在怪異模式下必須通過文檔的body上查詢。
function getScrollOffsets(w) {
var w = w || window;
if (w.pageXoffset != null) {
return { x: w.pageXoffset, y: pageYoffset };
}
var d = w.document;
if (document.compatMode == "CSS1Compat")
return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop };
return { x: d.body.scrollLeft, y: d.body.scrollTop };
}
有時(shí)候能夠判斷視口的尺寸也是非常有用的
function getViewPortSize(w) {
var w = w || window;
if (w.innerWidth != null)
return { w: w.innerWidth, h: w.innerHeight };
var d = w.document;
if (document.compatMode == "CSS1Compat")
return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight };
return { w: d.body.clientWidth, h: d.body.clientHeight };
}
文檔坐標(biāo)
任何HTML元素都擁有offectLeft和offectTop屬性返回元素的X和Y坐標(biāo)，對于很多元素，這些值是文檔坐標(biāo)，但是對于以定位元素后代及一些其他元素（表格單元），返回相對于祖先的坐標(biāo)。我們可以通過簡單的遞歸上溯累加計(jì)算
function getElementPosition(e) {
var x = 0, y = 0;
while (e != null) {
x += e.offsetLeft;
y += e, offsetTop;
e = e.offsetParent;
}
return { x: x, y: y };
}
盡管如此，這個(gè)函數(shù)也不總是計(jì)算正確的值，當(dāng)文檔中含有滾動條的時(shí)候這個(gè)方法就不能正常工作了，我們只能在沒有滾動條的情況下使用這個(gè)方法，不過我們用這個(gè)原理算出一些元素相對于某個(gè)父元素的坐標(biāo)。
視口坐標(biāo)
計(jì)算視口坐標(biāo)就相對簡單了很多，可以通過調(diào)用元素的getBoundingClientRect方法。方法返回一個(gè)有l(wèi)eft、right、top、bottom屬性的對象，分別表示元素四個(gè)位置的相對于視口的坐標(biāo)。getBoundingClientRect所返回的坐標(biāo)包含元素的內(nèi)邊距和邊框，不包含外邊距。兼容性很好，非常好用
元素尺寸
由上面計(jì)算坐標(biāo)方法，我們可以方便得出元素尺寸。在符合W3C標(biāo)準(zhǔn)的瀏覽器中g(shù)etBoundingClientRect返回的對象還包括width和height,但在原始IE中未實(shí)現(xiàn)，但是通過返回對象的right-left和bottom-top可以方便計(jì)算出。
相關(guān)文章
這篇文章主要介紹了JS如何刪除對象中的某一屬性(delete),在這里需要注意已聲明的對象不可刪除, 對象中的對象屬性可以刪除，本文結(jié)合示例代碼給大家的非常詳細(xì)，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了深入理解JavaScript中的箭頭函數(shù),文中主要針對ES6版本的JS進(jìn)行相關(guān)的講解,需要的朋友可以參考下2015-07-07
javascript的數(shù)組和常用函數(shù)詳解
這篇文章主要介紹了javascript的數(shù)組和常用函數(shù)詳解,非常詳細(xì)，適合新手學(xué)習(xí),需要的朋友可以參考下2014-05-05
這篇文章主要介紹了簡介JavaScript中substring()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
JavaScript高級程序設(shè)計(jì)（第3版）學(xué)習(xí)筆記12 js正則表達(dá)式
前面在分析PhoneGap源碼的時(shí)候，曾經(jīng)總結(jié)過一次正則表達(dá)式的用法，為了不同系列文章的完整性，這里將那里的總結(jié)遷移過來2012-10-10
JavaScript高級程序設(shè)計(jì)（第3版）學(xué)習(xí)筆記7 js函數(shù)（上）
如果說對象是房間，那么函數(shù)就是有魔幻效應(yīng)的房間了。函數(shù)首先是對象，然后這個(gè)函數(shù)對象還具有很多魔幻功能2012-10-10
JavaScript的三大前端框架Vue和Angular和React
這篇文章主要為大家介紹了JavaScript的三大前端框架Vue和Angular和React，文章中有詳細(xì)的代碼示例，有需要的朋友可以借鑒參考下，2023-04-04
這篇文章主要介紹了關(guān)于JSON的定義以及如何使用，JSON 的名稱中雖然帶有JavaScript，但這是指其語法規(guī)則是參考JavaScript對象的，而不是指只能用于JavaScript語言,需要的朋友可以參考下2023-07-07
下面小編就為大家?guī)硪黄狫avascript中的幾種繼承方式對比分析。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，希望能給大家一個(gè)參考。一起跟隨小編過來看看吧2016-03-03
這篇文章介紹了ES6新增的關(guān)鍵字let和const，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03