Javascript中怎么獲取頁(yè)面元素的位置

這篇文章給大家介紹Javascript中怎么獲取頁(yè)面元素的位置，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

一、網(wǎng)頁(yè)的大小和瀏覽器窗口的大小

首先，要明確兩個(gè)基本概念。

一張網(wǎng)頁(yè)的全部面積，就是它的大小。通常情況下，網(wǎng)頁(yè)的大小由內(nèi)容和CSS樣式表決定。

瀏覽器窗口的大小，則是指在瀏覽器窗口中看到的那部分網(wǎng)頁(yè)面積，又叫做viewport（視口）。

很顯然，如果網(wǎng)頁(yè)的內(nèi)容能夠在瀏覽器窗口中全部顯示（也就是不出現(xiàn)滾動(dòng)條），那么網(wǎng)頁(yè)的大小和瀏覽器窗口的大小是相等的。如果不能全部顯示，則滾動(dòng)瀏覽器窗口，可以顯示出網(wǎng)頁(yè)的各個(gè)部分。

二、獲取網(wǎng)頁(yè)的大小

網(wǎng)頁(yè)上的每個(gè)元素，都有clientHeight和clientWidth屬性。這兩個(gè)屬性指元素的內(nèi)容部分再加上padding的所占據(jù)的視覺(jué)面積，不包括border和滾動(dòng)條占用的空間。

因此，document元素的clientHeight和clientWidth屬性，就代表了網(wǎng)頁(yè)的大小。

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è)面加載完成后才能運(yùn)行，否則document對(duì)象還沒(méi)生成，瀏覽器會(huì)報(bào)錯(cuò)。

2）大多數(shù)情況下，都是document.documentElement.clientWidth返回正確值。但是，在IE6的quirks模式中，document.body.clientWidth返回正確的值，因此函數(shù)中加入了對(duì)文檔模式的判斷。

3）clientWidth和clientHeight都是只讀屬性，不能對(duì)它們賦值。

三、獲取網(wǎng)頁(yè)大小的另一種方法

網(wǎng)頁(yè)上的每個(gè)元素還有scrollHeight和scrollWidth屬性，指包含滾動(dòng)條在內(nèi)的該元素的視覺(jué)面積。

那么，document對(duì)象的scrollHeight和scrollWidth屬性就是網(wǎng)頁(yè)的大小，意思就是滾動(dòng)條滾過(guò)的所有長(zhǎng)度和寬度。

仿照getViewport()函數(shù)，可以寫(xiě)出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èn)題。如果網(wǎng)頁(yè)內(nèi)容能夠在瀏覽器窗口中全部顯示，不出現(xiàn)滾動(dòng)條，那么網(wǎng)頁(yè)的clientWidth和scrollWidth應(yīng)該相等。但是實(shí)際上，不同瀏覽器有不同的處理，這兩個(gè)值未必相等。所以，我們需要取它們之中較大的那個(gè)值，因此要對(duì)getPagearea()函數(shù)進(jìn)行改寫(xiě)。

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)頁(yè)元素的絕對(duì)位置

網(wǎng)頁(yè)元素的絕對(duì)位置，指該元素的左上角相對(duì)于整張網(wǎng)頁(yè)左上角的坐標(biāo)。這個(gè)絕對(duì)位置要通過(guò)計(jì)算才能得到。

首先，每個(gè)元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對(duì)象）左上角的距離。所以，只需要將這兩個(gè)值進(jìn)行累加，就可以得到該元素的絕對(duì)坐標(biāo)。

（圖二 offsetTop和offsetLeft屬性）

下面兩個(gè)函數(shù)可以用來(lái)獲取絕對(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)頁(yè)元素的相對(duì)位置

網(wǎng)頁(yè)元素的相對(duì)位置，指該元素左上角相對(duì)于瀏覽器窗口左上角的坐標(biāo)。

有了絕對(duì)位置以后，獲得相對(duì)位置就很容易了，只要將絕對(duì)坐標(biāo)減去頁(yè)面的滾動(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)的改寫(xiě)：

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è)到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁(yè)元素的相對(duì)位置。另外，element.scrollIntoView()方法也有類(lèi)似作用，可以使網(wǎng)頁(yè)元素出現(xiàn)在瀏覽器窗口的左上角。

六、獲取元素位置的快速方法

除了上面的函數(shù)以外，還有一種快速方法，可以立刻獲得網(wǎng)頁(yè)元素的位置。

那就是使用getBoundingClientRect()方法。它返回一個(gè)對(duì)象，其中包含了left、right、top、bottom四個(gè)屬性，分別對(duì)應(yīng)了該元素的左上角和右下角相對(duì)于瀏覽器窗口（viewport）左上角的距離。

所以，網(wǎng)頁(yè)元素的相對(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;

關(guān)于Javascript中怎么獲取頁(yè)面元素的位置就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。