|
|
下面的教程總結(jié)了Javascript在網(wǎng)頁定位方面的相關(guān)知識。
一、網(wǎng)頁的絕對大小和相對大小
首先，要明確兩個基本概念。
一張網(wǎng)頁的全部面積，就是它的絕對大小。通常情況下，網(wǎng)頁的絕對大小由內(nèi)容和CSS樣式表決定。
網(wǎng)頁的相對大小則是指在瀏覽器窗口中看到的那部分網(wǎng)頁，也就是瀏覽器窗口的大小，又叫做viewport（視口）。
下圖中央的方框就代表瀏覽器窗口，每次只能顯示一部分網(wǎng)頁。
（圖一 網(wǎng)頁的絕對大小和相對大?。?/P>
很顯然，如果網(wǎng)頁的內(nèi)容能夠在瀏覽器窗口中全部顯示（也就是不出現(xiàn)滾動條），那么網(wǎng)頁的絕對大小和相對大小是相等的。
二、獲取網(wǎng)頁的相對大小
網(wǎng)頁上的每個元素，都有clientHeight和clientWidth屬性，利用它們就可以得到網(wǎng)頁的相對大小。這兩個屬性代表的大小，是指元素的內(nèi)容部分再加上padding的大小，但是不包括border和滾動條占用的空間。
（圖二 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ù)就可以返回瀏覽器窗口的高和寬。使用的時候，有三個地方需要注意：
1）這個函數(shù)必須在頁面加載完成后才能運行，否則document對象還沒生成，瀏覽器會報錯。
2）大多數(shù)情況下，都是document.documentElement.clientWidth返回正確值。但是，在IE6的quirks模式中，document.body.clientWidth返回正確的值，因此函數(shù)中加入了對文檔模式的判斷。
3）clientWidth和clientHeight都是只讀屬性，不能對它們賦值。
三、獲取網(wǎng)頁的絕對大小
document對象的scrollHeight和scrollWidth屬性就是網(wǎ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
}
}
}
但是，這個函數(shù)有一個問題。前面說過，如果網(wǎng)頁內(nèi)容能夠在瀏覽器窗口中全部顯示，不出現(xiàn)滾動條，那么網(wǎng)頁的絕對大小與相對大小應(yīng)該相等，即 clientWidth和scrollWidth應(yīng)該相等。但是實際上，不同瀏覽器有不同的處理，這兩個值未必相等。所以，我們需要取它們之中較大的那個值，因此要對getPagearea()函數(shù)進行改寫。
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)頁元素的絕對位置
由于網(wǎng)頁大小有絕對和相對之分，所以網(wǎng)頁元素的位置也有絕對和相對之分。網(wǎng)頁元素的左上角相對于整張網(wǎng)頁左上角的坐標(biāo)，就是絕對位置；相對于瀏覽器窗口左上角的坐標(biāo)，就是相對位置。
Javascript語言中，網(wǎng)頁元素的絕對坐標(biāo)要通過計算才能得到。每個元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對象）左上角的距離。所以，只需要將這兩個值進行累加，就可以得到該元素的絕對坐標(biāo)。
（圖三 offsetTop和offsetLeft屬性）
下面兩個函數(shù)可以用來獲取絕對位置的橫坐標(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對象未必等于父容器，所以上面的函數(shù)對于表格和iframe中的元素不適用。
五、獲取網(wǎng)頁元素的相對位置
有了某個元素的絕對位置以后，獲得相對位置就很容易了，只要將絕對坐標(biāo)減去滾動條滾動的距離就可以了。滾動條滾動的垂直距離，是document對象的scrollTop屬性；滾動條滾動的水平距離是document對象的scrollLeft屬性。
（圖四 scrollTop和scrollLeft屬性）
對上一節(jié)中的兩個函數(shù)進行相應(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屬性是可以賦值的，并且會立即自動滾動網(wǎng)頁到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁元素的相對位置。另外，element.scrollIntoView()方法也有類似作用，可以使網(wǎng)頁元素出現(xiàn)在瀏覽器窗口的左上角。
六、獲取元素位置的快速方法
除了上面的函數(shù)以外，還有一種快速方法，可以立刻獲得網(wǎng)頁元素的位置。
那就是使用getBoundingClientRect()方法。它返回一個對象，其中包含了left、right、top、bottom四個屬性，分別對應(yīng)了該元素的左上角和右下角相對于瀏覽器窗口（viewport）左上角的距離。
所以，網(wǎng)頁元素的相對位置就是
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技術(shù)：用Javascript 獲取頁面元素的位置的代碼，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
