http://www.360doc.com/content/11/0125/12/5480484_88885141.shtml1、基礎(chǔ)知識：
網(wǎng)頁的大小和
瀏覽器窗口的大小
首先，要明確兩個基本概念。
一張網(wǎng)頁的全部面積，就是它的大小。通常情況下，網(wǎng)頁的大小由內(nèi)容和CSS樣式表決定。瀏覽器窗口的大小，則是指在瀏覽器窗口中看到的那部分網(wǎng)頁面積，又叫做viewport（視口）。很顯然，如果網(wǎng)頁的內(nèi)容能夠在瀏覽器窗口中全部顯示（也就是不出現(xiàn)滾動條），那么網(wǎng)頁的大小和瀏覽器窗口的大小是相等的。如果不能全部顯示，則滾動瀏覽器窗口，可以顯示出網(wǎng)頁的各個部分。
2、clientLeft,clientTop,clientWidth,clientHeight
（圖一 clientHeight和clientWidth屬性）
clientWidth=width+padding
clientHeight=heigt+padding
function getViewport(){
if (document.compatMode == "BackCompat"){
return{
width:document.body.clientWidth;
height:document.body.clientHeight;
//整個網(wǎng)頁的大小
}
else{
return{
width:document.documentElement(一個div).clientWidth
height:document.documentElement.clientHeight;
//一個div的大小
}
}
}3、screenLeft,screenTop,screenWidth,screenHeight
網(wǎng)頁上的每個元素還有scrollHeight和scrollWidth屬性，指包含滾動條在內(nèi)的該元素的視覺面積.那么，document對象的scrollHeight和scrollWidth屬性就是網(wǎng)頁的大小，意思就是滾動條滾過的所有長度和寬度。
function getViewport(){
if (document.compatMode == "BackCompat"){
return{
width:document.body.screenWidth;
height:document.body.screenHeight ;
//整個網(wǎng)頁的大小（包括不同見的滾動條大小,如沒有滾動條，screenwidth=clientwidth）
}
else{
return{
width:document.documentElement(一個div).screenWidth
height:document.documentElement.screenHeight ;
//一個div的大小
}
}
} 4、offsetLeft,offsetTop,offsetWidth,offsetHeight(獲取網(wǎng)頁元素的絕對位置)
網(wǎng)頁元素的絕對位置，指該元素的左上角相對于整張網(wǎng)頁左上角的坐標(biāo)。這個絕對位置要通過計(jì)算才能得到。
首先，每個元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對象）左上角的距離。所以，只需要將這兩個值進(jìn)行累加，就可以得到該元素的絕對坐標(biāo).
offsetWidth=width+padding+border
offsetHeight=height+padding+border
（圖二 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中的元素不適用.
5、獲取元素位置的快速方法
除了上面的函數(shù)以外，還有一種快速方法，可以立刻獲得網(wǎng)頁元素的位置.那就是使用getBoundingClientRect()方法。它返回一個對象，其中包含了left、right、top、bottom四個屬性，分別對應(yīng)了該元素的左上角和右下角相對于瀏覽器窗口（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不支持
名稱: ?4C.ESL | .↗Evon
口號: 遇到新問題?先要尋找一個方案乄而不是創(chuàng)造一個方案こ
mail: 聯(lián)系我