制做網頁的過程當中，你有時候須要知道某個元素在網頁上的確切位置。 java
下面的教程總結了Javascript在網頁定位方面的相關知識。 瀏覽器
1、網頁的大小和瀏覽器窗口的大小 函數
首先，要明確兩個基本概念。 ui
一張網頁的所有面積，就是它的大小。一般狀況下，網頁的大小由內容和CSS樣式表決定。 this
瀏覽器窗口的大小，則是指在瀏覽器窗口中看到的那部分網頁面積，又叫作viewport（視口）。 spa
很顯然，若是網頁的內容可以在瀏覽器窗口中所有顯示（也就是不出現滾動條），那麼網頁的大小和瀏覽器窗口的大小是相等的。若是不能所有顯示，則滾動瀏覽器窗口，能夠顯示出網頁的各個部分。 code
2、獲取網頁的大小 orm
網頁上的每一個元素，都有clientHeight和clientWidth屬性。這兩個屬性指元素的內容部分再加上padding的所佔據的視覺面積，不包括border和滾動條佔用的空間。
（圖一 clientHeight和clientWidth屬性）
所以，document元素的clientHeight和clientWidth屬性，就表明了網頁的大小。
代碼
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都是隻讀屬性，不能對它們賦值。
3、獲取網頁大小的另外一種方法
網頁上的每一個元素還有scrollHeight和scrollWidth屬性，指包含滾動條在內的該元素的視覺面積。
那麼，document對象的scrollHeight和scrollWidth屬性就是網頁的大小，意思就是滾動條滾過的全部長度和寬度。
仿照getViewport()函數，能夠寫出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()函數進行改寫。
代碼
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)
}
}
}
4、獲取網頁元素的絕對位置
網頁元素的絕對位置，指該元素的左上角相對於整張網頁左上角的座標。這個絕對位置要經過計算才能獲得。
首先，每一個元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對象）左上角的距離。因此，只須要將這兩個值進行累加，就能夠獲得該元素的絕對座標。
（圖二 offsetTop和offsetLeft屬性）
下面兩個函數能夠用來獲取絕對位置的橫座標和縱座標。
代碼
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中的元素不適用。
5、獲取網頁元素的相對位置
網頁元素的相對位置，指該元素左上角相對於瀏覽器窗口左上角的座標。
有了絕對位置之後，得到相對位置就很容易了，只要將絕對座標減去頁面的滾動條滾動的距離就能夠了。滾動條滾動的垂直距離，是document對象的scrollTop屬性；滾動條滾動的水平距離是document對象的scrollLeft屬性。
（圖三 scrollTop和scrollLeft屬性）
對上一節中的兩個函數進行相應的改寫：
代碼
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()方法也有相似做用，可使網頁元素出如今瀏覽器窗口的左上角。
6、獲取元素位置的快速方法
除了上面的函數之外，還有一種快速方法，能夠馬上得到網頁元素的位置。
那就是使用getBoundingClientRect()方法。它返回一個對象，其中包含了left、right、top、bottom四個屬性，分別對應了該元素的左上角和右下角相對於瀏覽器窗口（viewport）左上角的距離。
因此，網頁元素的相對位置就是
var Y = this . getBoundingClientRect() . top;
再加上滾動距離，就能夠獲得絕對位置
var Y = this . getBoundingClientRect() . top + document . documentElement . scrollTop;
目前，IE、Firefox 3.0+、Opera 9.5+都支持該方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。
（完）
轉自：http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html