制作網頁的過程中，你有時候需要知道某個元素在網頁上的確切位置。
下面的教程總結了Javascript在網頁定位方面的相關知識。
一、網頁的大小和瀏覽器窗口的大小
首先，要明確兩個基本概念。
一張網頁的全部面積，就是它的大小。通常情況下，網頁的大小由內容和CSS樣式表決定。
瀏覽器窗口的大小，則是指在瀏覽器窗口中看到的那部分網頁面積，又叫做viewport（視口）。
很顯然，如果網頁的內容能夠在瀏覽器窗口中全部顯示（也就是不出現滾動條），那么網頁的大小和瀏覽器窗口的大小是相等的。如果不能全部顯示，則滾動瀏覽器窗口，可以顯示出網頁的各個部分。
二、獲取網頁的大小
網頁上的每個元素，都有clientHeight和clientWidth屬性。這兩個屬性指元素的內容部分再加上padding的所占據的視覺面積，不包括border和滾動條占用的空間。
（圖一 clientHeight和clientWidth屬性）
因此，document元素的clientHeight和clientWidth屬性，就代表了網頁的大小。
function getViewport(){
if (document.compatMode == "BackCompat"){
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
上面的getViewport函數就可以返回瀏覽器窗口的高和寬。使用的時候，有三個地方需要注意：
1）這個函數必須在頁面加載完成后才能運行，否則document對象還沒生成，瀏覽器會報錯。
2）大多數情況下，都是document.documentElement.clientWidth返回正確值。但是，在IE6的quirks模式中，document.body.clientWidth返回正確的值，因此函數中加入了對文檔模式的判斷。
3）clientWidth和clientHeight都是只讀屬性，不能對它們賦值。
三、獲取網頁大小的另一種方法
網頁上的每個元素還有scrollHeight和scrollWidth屬性，指包含滾動條在內的該元素的視覺面積。
那么，document對象的scrollHeight和scrollWidth屬性就是網頁的大小，意思就是滾動條滾過的所有長度和寬度。
仿照getViewport()函數，可以寫出getPagearea()函數。
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
width: document.body.scrollWidth,
height: document.body.scrollHeight
}
} else {
return {
width: document.documentElement.scrollWidth,
height: document.documentElement.scrollHeight
}
}
}
但是，這個函數有一個問題。如果網頁內容能夠在瀏覽器窗口中全部顯示，不出現滾動條，那么網頁的clientWidth和scrollWidth應 該相等。但是實際上，不同瀏覽器有不同的處理，這兩個值未必相等。所以，我們需要取它們之中較大的那個值，因此要對getPagearea()函數進行改 寫。
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
width: Math.max(document.body.scrollWidth,
document.body.clientWidth),
height: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} else {
return {
width: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
四、獲取網頁元素的絕對位置
網頁元素的絕對位置，指該元素的左上角相對於整張網頁左上角的坐標。這個絕對位置要通過計算才能得到。
首先，每個元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對象）左上角的距離。所以，只需要將這兩個值進行累加，就可以得到該元素的絕對坐標。
（圖二 offsetTop和offsetLeft屬性）
下面兩個函數可以用來獲取絕對位置的橫坐標和縱坐標。
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
由於在表格和iframe中，offsetParent對象未必等於父容器，所以上面的函數對於表格和iframe中的元素不適用。
五、獲取網頁元素的相對位置
網頁元素的相對位置，指該元素左上角相對於瀏覽器窗口左上角的坐標。
有了絕對位置以后，獲得相對位置就很容易了，只要將絕對坐標減去頁面的滾動條滾動的距離就可以了。滾動條滾動的垂直距離，是document對象的scrollTop屬性；滾動條滾動的水平距離是document對象的scrollLeft屬性。
（圖三 scrollTop和scrollLeft屬性）
對上一節中的兩個函數進行相應的改寫：
function getElementViewLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} else {
var elementScrollLeft=document.documentElement.scrollLeft;
}
return actualLeft-elementScrollLeft;
}
function getElementViewTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} else {
var elementScrollTop=document.documentElement.scrollTop;
}
return actualTop-elementScrollTop;
}
scrollTop和scrollLeft屬性是可以賦值的，並且會立即自動滾動網頁到相應位置，因此可以利用它們改變網頁元素的相對位置。另外，element.scrollIntoView()方法也有類似作用，可以使網頁元素出現在瀏覽器窗口的左上角。
六、獲取元素位置的快速方法
除了上面的函數以外，還有一種快速方法，可以立刻獲得網頁元素的位置。
那就是使用getBoundingClientRect()方法。它返回一個對象，其中包含了left、right、top、bottom四個屬性，分別對應了該元素的左上角和右下角相對於瀏覽器窗口（viewport）左上角的距離。
所以，網頁元素的相對位置就是
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
再加上滾動距離，就可以得到絕對位置
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
目前，IE、Firefox 3.0+、Opera 9.5+都支持該方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。
在一些復雜的頁面中經常會用JavaScript處理一些DOM元素的動態效果，這種時候我們經常會用到一些元素位置和尺寸的計算，瀏覽器兼容性問題也是不可忽略的一部分，要想寫出預想效果的JavaScript代碼，我們需要了解一些基本知識。
基礎概念
為了方便理解，我們需要了解幾個基礎概念，每個HTML元素都有下列屬性
| offsetWidth |
clientWidth |
scrollWidth |
| offsetHeight |
clientHeight |
scrollHeight |
| offsetLeft |
clientLeft |
scrollLeft |
| offsetTop |
clientTop |
scrollTop |
為了理解這些屬性，我們需要知道HTML元素的實際內容有可能比分配用來容納內容的盒子更大，因此可能會出現滾動條，內容區域是視口，當實際內容比視口大的時候，需要把元素的滾動條位置考慮進去。
1. clientHeight和clientWidth用於描述元素內尺寸，是指 元素內容+內邊距 大小，不包括邊框（IE下實際包括）、外邊距、滾動條部分
2. offsetHeight和offsetWidth用於描述元素外尺寸，是指 元素內容+內邊距+邊框，不包括外邊距和滾動條部分
3. clientTop和clientLeft返回內邊距的邊緣和邊框的外邊緣之間的水平和垂直距離，也就是左，上邊框寬度
4. offsetTop和offsetLeft表示該元素的左上角（邊框外邊緣）與已定位的父容器（offsetParent對象）左上角的距離
5. offsetParent對象是指元素最近的定位（relative,absolute）祖先元素，遞歸上溯，如果沒有祖先元素是定位的話，會返回null
寫個小例子方便理解
<div id="divParent" style="padding: 8px; 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左、上邊框寬度
offsetHeight是clientHeight+上下個3px的邊框寬度之和，offsetWidth同理
offsetTop是div 30px的 maggin+offsetparent 8px的 padding，offsetLeft同理
6. scrollWidth和scrollHeight是元素的內容區域加上內邊距加上溢出尺寸，當內容正好和內容區域匹配沒有溢出時，這些屬性與clientWidth和clientHeight相等
7. scrollLeft和scrollTop是指元素滾動條位置，它們是可寫的
下面寫個簡單例子理解
<div id="divParent" style=" 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標准不一致，不加討論，兼容性問題下面會介紹到）下得到結果scrollHeight: 494，而在Chrome和Safari下得到結果scrollHeight: 502，差了8px，根據8可以簡單推測是divParent的padding，來算一下是不是
我們可以看看它們的結果是怎么來的，首先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下沒有計算下padding
有了這些基礎知識后，我們就可以計算元素的位置和尺寸了。
相對於文檔與視口的坐標
當我們計算一個DOM元素位置也就是坐標的時候，會涉及到兩種坐標系，文檔坐標和視口坐標。
我們經常用到的document就是整個頁面部分，而不僅僅是窗口可見部分，還包括因為窗口大小限制而出現滾動條的部分，它的左上角就是我們所謂相對於文檔坐標的原點。
視口是顯示文檔內容的瀏覽器的一部分，它不包括瀏覽器外殼（菜單，工具欄，狀態欄等），也就是當前窗口顯示頁面部分，不包括滾動條。
如果文檔比視口小，說明沒有出現滾動，文檔左上角和視口左上角相同，一般來講在兩種坐標系之間進行切換，需要加上或減去滾動的偏移量（scroll offset）。
為了在坐標系之間進行轉換，我們需要判定瀏覽器窗口的滾動條位置。window對象的pageXoffset和pageYoffset提供這些值，IE 8及更早版本除外。也可以通過scrollLeft和scrollTop屬性獲得滾動條位置，正常情況下通過查詢文檔根節點（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 }; }
有時候能夠判斷視口的尺寸也是非常有用的
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 }; }
文檔坐標
任何HTML元素都擁有offectLeft和offectTop屬性返回元素的X和Y坐標，對於很多元素，這些值是文檔坐標，但是對於以定位元素后代及一些其他元素（表格單元），返回相對於祖先的坐標。我們可以通過簡單的遞歸上溯累加計算
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 }; }
盡管如此，這個函數也不總是計算正確的值，當文檔中含有滾動條的時候這個方法就不能正常工作了，我們只能在沒有滾動條的情況下使用這個方法，不過我們用這個原理算出一些元素相對於某個父元素的坐標。
視口坐標
計算視口坐標就相對簡單了很多，可以通過調用元素的getBoundingClientRect方法。方法返回一個有left、right、top、bottom屬性的對象，分別表示元素四個位置的相對於視口的坐標。getBoundingClientRect所返回的坐標包含元素的內邊距和邊框，不包含外邊距。兼容性很好，非常好用
元素尺寸
由上面計算坐標方法，我們可以方便得出元素尺寸。在符合W3C標准的瀏覽器中getBoundingClientRect返回的對象還包括width和height,但在原始IE中未實現，但是通過返回對象的right-left和bottom-top可以方便計算出。
在javascript中操作dom節點讓其運動的時候，常常會涉及到各種寬高以及位置坐標等概念，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運動原理，同時，由於這些屬性概念較多，加上瀏覽器之間
實現方式不同，常常會造成概念混淆，經過研究之后，這里來進行一個總結。
第一部分：DOM對象
1.1只讀屬性
所謂的只讀屬性指的是DOM節點的固有屬性，該屬性只能通過js去獲取而不能通過js去設置，而且獲取的值是只有數字並不帶單位的（px,em等），如下：
1）clientWidth和clientHeight
該屬性指的是元素的可視部分寬度和高度，即padding+content，如果沒有滾動條，即為元素設定的高度和寬度，如果出現滾動條，滾動條會遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動條的寬高
css:
<style>
.one{ width: 200px; height: 200px; background: red; border: 1px solid #000000; overflow: auto; } </style>
HTML
<body> <div class="one"> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> </div> </body>
js
<script>
window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; console.log(oDiv.clientWidth+":"+oDiv.clientHeight); } </script>
結果：
元素本來設定為寬高都是200，即可視部分寬高都是200，但是由於出現了垂直方向的滾動條，占據了可視部分的寬度，所以clientWidth變成了183，而clientHeight依然是200.
2）offsetWidth和offsetHeight
這一對屬性指的是元素的border+padding+content的寬度和高度，該屬性和其內部的內容是否超出元素大小無關，只和本來設定的border以及width和height有關
css和HTML部分同上，js部分如下：
<script>
window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; console.log(oDiv.offsetWidth+":"+oDiv.offsetHeight); } </script>
最終結果：
可以看到該屬性和clientWidth以及clientHeight相比，多了設定的邊框border的寬度和高度。
3）clientTop和clientLeft
這一對屬性是用來讀取元素的border的寬度和高度的。
css
<style>
body{ border: 2px solid #000000; } .one{ border: 1px solid red; width: 100px; height: 100px; background: red; } </style>
html
<body> <div class="one"> </div> </body>
js
<script>
var oDiv=document.getElementsByClassName('one')[0]; console.log(oDiv.clientLeft+":"+oDiv.clientTop);
</script>
最終結果：
可以看到div的border被設定了1px的寬，這里顯示的就是它的寬度
4）offsetLeft和offsetTop
說到這對屬性就需要說下offsetParent,所謂offsetParent指的是當前元素的離自己最近的具有定位的（position:absolute或者position：relative）父級元素（不僅僅指的是直接父級元素，只要是它的父元素都可以），該父級元素就是當前元素的offsetParent，如果從該元素向上尋找，找不到這樣一個父級元素，那么當前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是當前元素，相對於其offsetParent左邊距離和上邊距離，即當前元素的border到包含它的offsetParent的border的距離如下所示：
css
<style>
.two{ position: relative; width: 200px; height: 200px; border: 1px solid green; } .one { width: 100px; height: 100px; background: red; margin: 20px; border: 1px solid #000000; position: absolute; top:20px; } </style>
HTML
<body> <div class="two"> <div class="one"> </div> </div> </body>
js
<script>
var oDiv=document.querySelector('.one'); console.log(oDiv.offsetTop+":"+oDiv.offsetLeft); </script>
最終結果：
這里讓div.two相對定位，讓div.one絕對定位，所以div.two是one的offsetParent,同時，又給div.one加了一個margin為20px,所以這里它的offsetTop為40，offsetLeft 本來為0，但是加上margin為20之后就變成了20.
5）scrollHeight和scrollWidth
顧名思義，這兩個屬性指的是當元素內部的內容超出其寬度和高度的時候，元素內部內容的實際寬度和高度，需要注意的是，當元素其中內容沒有超過其高度或者寬度的時候，該屬性是取不到的。
css
<style>
.one{ width: 100px; height: 100px; overflow: auto; } </style>
HTML
<body> <div class="one"> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> 我是內容<br> </div> </body>
js
<script>
var oDiv=document.querySelector('.one'); oDiv.onscroll=function(){ console.log(this.scrollHeight+":"+this.scrollWidth); } </script>
最終結果
盡管該div的寬高都是100，但是其scrollheight為234顯示的是其中內容的實際高度，scrollWidth為83（由於滾動條占據了寬度）
1.2可讀可寫屬性
所謂的可讀可寫屬性指的是不僅能通過js獲取該屬性的值，還能夠通過js為該屬性賦值。
1）scrollTop和scrollLeft
這對屬性是可讀寫的，指的是當元素其中的內容超出其寬高的時候，元素被卷起的高度和寬度。
css和html部分同上，js部分如下：
<script>
var oDiv=document.querySelector('.one'); oDiv.onscroll=function(){ console.log(this.scrollTop+":"+this.scrollLeft); } </script>
最終結果：
由於拖動了滾動條，scrollTop的屬性值一直在增大，而水平方向沒有滾動條，所以scrollLeft一直為0.
該屬性還可以通過賦值內容自動滾動到某個位置，js如下：
<script>
var oDiv=document.querySelector('.one'); oDiv.scrollTop=20; oDiv.onscroll=function(){ console.log(this.scrollTop+":"+this.scrollLeft); } </script>
結果如下：
通過直接設定div的scrollTop,讓它直接顯示在滾動條在20垂直方向上20的位置。
2）obj.style.*屬性
對於一個dom元素，它的style屬性返回的是一個對象，這個對象中的任意一個屬性是可讀寫的。如obj.style.top,obj.style.wdith等，在讀的時候，他們返回的值常常是帶有單位的(如px),同時，對於這種方式，
它只能夠獲取到該元素的行內樣式，而並不能獲取到該元素最終計算好的樣式，這就是在讀取屬性值得時候和以上只讀屬性的區別，要獲取計算好的樣式，請使用obj.currentstyle（IE）和getComputedStyle(IE之外的瀏覽器)。另一方面，這些屬性能夠被賦值，js運動的原理就是通過不斷修改這些屬性的值而達到其位置改變的，需要注意的是，給這些屬性賦值的時候需要帶單位的要帶上單位，否則不生效。
第二部分 Event對象
在js中，對於元素的運動的操作通常都會涉及到event對象，而event對象也存在很多位置屬性，且由於瀏覽器兼容性問題會導致這些屬性間相互混淆，這里一一講解。
1）clientX和clientY，這對屬性是當事件發生時，鼠標點擊位置相對於瀏覽器（可視區）的坐標，即瀏覽器左上角坐標的（0,0），該屬性以瀏覽器左上角坐標為原點，計算鼠標點擊位置距離其左上角的位置，
不管瀏覽器窗口大小如何變化，都不會影響點擊位置的坐標。
js
<script>
var oDiv=document.querySelector('.one'); oDiv.onclick=function(ev){ var evt=ev||event; console.log(evt.clientX+":"+evt.clientY); } </script>
結果：
2）screenX和screenY是事件發生時鼠標相對於屏幕的坐標，以設備屏幕的左上角為原點，事件發生時鼠標點擊的地方即為該點的screenX和screenY值，如下所示：
可以看到盡管瀏覽器窗口被縮到很小，但是坐標值卻很大，因為是相對於屏幕坐標而不是瀏覽器的坐標。
3）offsetX和offsetY
這一對屬性是指當事件發生時，鼠標點擊位置相對於該事件源的位置，即點擊該div，以該div左上角為原點來計算鼠標點擊位置的坐標，如下所示：
可以看到，點擊該div的靠近左上角處，它的offsetX和offsetY為1,0，需要注意的是，IE，chrome，opera都支持該屬性，唯獨Firefox不支持該屬性，Firefox中與此屬性相對應的概念是，event.layerX和event.layerY,所以需要兼容瀏覽器時，獲取鼠標點擊位置相對於事件源的坐標的兼容寫法為var disX=event.offsetX||event.layerX.
4)pageX和pageY
顧名思義，該屬性是事件發生時鼠標點擊位置相對於頁面的位置，通常瀏覽器窗口沒有出現滾動條時，該屬性和event.clientX及event.clientY是等價的，但是當瀏覽器出現滾動條的時候，pageX通常會大於clientX，因為頁面還存在被卷起來的部分的寬度和高度，如下所示：
由於瀏覽器出現了垂直和水平的滾動條，所以pageX和pageY大於clientX和clientY。
當瀏覽器的滾動條沒有被拖動或者瀏覽器沒有滾動條的時候，兩者是相等的。
From:http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
http://www.cnblogs.com/dolphinX/archive/2012/11/19/2777756.html
http://www.cnblogs.com/myzhibie/p/4256164.html?utm_source=tuicool