制作網(wǎng)頁的過程中檩咱，你有時(shí)候需要知道某個(gè)元素在網(wǎng)頁上的確切位置。
下面的教程總結(jié)了Javascript在網(wǎng)頁定位方面的相關(guān)知識(shí)胯舷。
一刻蚯、網(wǎng)頁的大小和瀏覽器窗口的大小
首先，要明確兩個(gè)基本概念桑嘶。
一張網(wǎng)頁的全部面積炊汹，就是它的大小。通常情況下逃顶，網(wǎng)頁的大小由內(nèi)容和CSS樣式表決定讨便。
瀏覽器窗口的大小，則是指在瀏覽器窗口中看到的那部分網(wǎng)頁面積以政，又叫做viewport（視口）霸褒。
很顯然，如果網(wǎng)頁的內(nèi)容能夠在瀏覽器窗口中全部顯示（也就是不出現(xiàn)滾動(dòng)條）盈蛮，那么網(wǎng)頁的大小和瀏覽器窗口的大小是相等的废菱。如果不能全部顯示，則滾動(dòng)瀏覽器窗口抖誉，可以顯示出網(wǎng)頁的各個(gè)部分昙啄。
二、獲取網(wǎng)頁的大小
網(wǎng)頁上的每個(gè)元素寸五，都有clientHeight和clientWidth屬性梳凛。這兩個(gè)屬性指元素的內(nèi)容部分再加上padding的所占據(jù)的視覺面積，不包括border和滾動(dòng)條占用的空間梳杏。
（圖一 clientHeight和clientWidth屬性）
因此韧拒，document元素的clientHeight和clientWidth屬性，就代表了網(wǎng)頁的大小十性。
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函數(shù)就可以返回瀏覽器窗口的高和寬叛溢。使用的時(shí)候，有三個(gè)地方需要注意：
1）這個(gè)函數(shù)必須在頁面加載完成后才能運(yùn)行劲适，否則document對(duì)象還沒生成楷掉，瀏覽器會(huì)報(bào)錯(cuò)。
2）大多數(shù)情況下霞势，都是document.documentElement.clientWidth返回正確值烹植。但是斑鸦，在IE6的quirks模式中，document.body.clientWidth返回正確的值草雕，因此函數(shù)中加入了對(duì)文檔模式的判斷巷屿。
3）clientWidth和clientHeight都是只讀屬性，不能對(duì)它們賦值墩虹。
三嘱巾、獲取網(wǎng)頁大小的另一種方法
網(wǎng)頁上的每個(gè)元素還有scrollHeight和scrollWidth屬性，指包含滾動(dòng)條在內(nèi)的該元素的視覺面積诫钓。
那么旬昭，document對(duì)象的scrollHeight和scrollWidth屬性就是網(wǎng)頁的大小，意思就是滾動(dòng)條滾過的所有長(zhǎng)度和寬度菌湃。
仿照getViewport()函數(shù)问拘，可以寫出getPagearea()函數(shù)。
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
}
}
}
但是慢味，這個(gè)函數(shù)有一個(gè)問題。如果網(wǎng)頁內(nèi)容能夠在瀏覽器窗口中全部顯示墅冷，不出現(xiàn)滾動(dòng)條纯路，那么網(wǎng)頁的clientWidth和scrollWidth應(yīng)該相等。但是實(shí)際上寞忿，不同瀏覽器有不同的處理驰唬，這兩個(gè)值未必相等。所以腔彰，我們需要取它們之中較大的那個(gè)值叫编，因此要對(duì)getPagearea()函數(shù)進(jìn)行改寫。
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)
}
}
}
四霹抛、獲取網(wǎng)頁元素的絕對(duì)位置
網(wǎng)頁元素的絕對(duì)位置搓逾，指該元素的左上角相對(duì)于整張網(wǎng)頁左上角的坐標(biāo)。這個(gè)絕對(duì)位置要通過計(jì)算才能得到杯拐。
首先霞篡，每個(gè)元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對(duì)象）左上角的距離端逼。所以朗兵，只需要將這兩個(gè)值進(jìn)行累加，就可以得到該元素的絕對(duì)坐標(biāo)顶滩。
（圖二 offsetTop和offsetLeft屬性）
下面兩個(gè)函數(shù)可以用來獲取絕對(duì)位置的橫坐標(biāo)和縱坐標(biāo)余掖。
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對(duì)象未必等于父容器礁鲁，所以上面的函數(shù)對(duì)于表格和iframe中的元素不適用盐欺。
五赁豆、獲取網(wǎng)頁元素的相對(duì)位置
網(wǎng)頁元素的相對(duì)位置，指該元素左上角相對(duì)于瀏覽器窗口左上角的坐標(biāo)找田。
有了絕對(duì)位置以后歌憨，獲得相對(duì)位置就很容易了，只要將絕對(duì)坐標(biāo)減去頁面的滾動(dòng)條滾動(dòng)的距離就可以了墩衙。滾動(dòng)條滾動(dòng)的垂直距離务嫡，是document對(duì)象的scrollTop屬性；滾動(dòng)條滾動(dòng)的水平距離是document對(duì)象的scrollLeft屬性漆改。
（圖三 scrollTop和scrollLeft屬性）
對(duì)上一節(jié)中的兩個(gè)函數(shù)進(jìn)行相應(yīng)的改寫：
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屬性是可以賦值的心铃，并且會(huì)立即自動(dòng)滾動(dòng)網(wǎng)頁到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁元素的相對(duì)位置挫剑。另外去扣，element.scrollIntoView()方法也有類似作用，可以使網(wǎng)頁元素出現(xiàn)在瀏覽器窗口的左上角樊破。
六愉棱、獲取元素位置的快速方法
除了上面的函數(shù)以外，還有一種快速方法哲戚，可以立刻獲得網(wǎng)頁元素的位置奔滑。
那就是使用getBoundingClientRect()方法。它返回一個(gè)對(duì)象顺少，其中包含了left朋其、right、top脆炎、bottom四個(gè)屬性梅猿，分別對(duì)應(yīng)了該元素的左上角和右下角相對(duì)于瀏覽器窗口（viewport）左上角的距離。
所以秒裕，網(wǎng)頁元素的相對(duì)位置就是
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
再加上滾動(dòng)距離袱蚓，就可以得到絕對(duì)位置
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不支持哨毁。
