用Javascript 擷取頁面元素的位置的代碼

來源:互聯網
上載者:User

下面的教程總結了Javascript在網頁定位方面的相關知識。

一、網頁的絕對大小和相對大小

首先,要明確兩個基本概念。

一張網頁的全部面積,就是它的絕對大小。通常情況下,網頁的絕對大小由內容和CSS樣式表決定。

網頁的相對大小則是指在瀏覽器視窗中看到的那部分網頁,也就是瀏覽器視窗的大小,又叫做viewport(視口)。

中央的方框就代表瀏覽器視窗,每次只能顯示一部分網頁。

(圖一 網頁的絕對大小和相對大小)

很顯然,如果網頁的內容能夠在瀏覽器視窗中全部顯示(也就是不出現捲軸),那麼網頁的絕對大小和相對大小是相等的。

二、擷取網頁的相對大小

網頁上的每個元素,都有clientHeight和clientWidth屬性,利用它們就可以得到網頁的相對大小。這兩個屬性代表的大小,是指元素的內容部分再加上padding的大小,但是不包括border和捲軸佔用的空間。

(圖二 clientHeight和clientWidth屬性)

因此,document元素的clientHeight和clientWidth屬性,就代表了網頁的相對大小。

  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函數就可以返回瀏覽器視窗的高和寬。使用的時候,有三個地方需要注意:
1)這個函數必須在頁面載入完成後才能運行,否則document對象還沒產生,瀏覽器會報錯。
2)大多數情況下,都是document.documentElement.clientWidth返回正確值。但是,在IE6的quirks模式中,document.body.clientWidth返回正確的值,因此函數中加入了對文檔模式的判斷。
3)clientWidth和clientHeight都是唯讀屬性,不能對它們賦值。

三、擷取網頁的絕對大小

document對象的scrollHeight和scrollWidth屬性就是網頁的絕對大小,意思就是捲軸滾過的所有長度和寬度。

仿照getViewport()函數,可以寫出getPagearea()函數。

  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
      }
    }
  }

但是,這個函數有一個問題。前面說過,如果網頁內容能夠在瀏覽器視窗中全部顯示,不出現捲軸,那麼網頁的絕對大小與相對大小應該相等,即 clientWidth和scrollWidth應該相等。但是實際上,不同瀏覽器有不同的處理,這兩個值未必相等。所以,我們需要取它們之中較大的那個值,因此要對getPagearea()函數進行改寫。

  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)
      }
    }
  }

四、擷取網頁元素的絕對位置

由於網頁大小有絕對和相對之分,所以網頁元素的位置也有絕對和相對之分。網頁元素的左上方相對於整張網頁左上方的座標,就是絕對位置;相對於瀏覽器視窗左上方的座標,就是相對位置。

Javascript語言中,網頁元素的絕對座標要通過計算才能得到。每個元素都有offsetTop和offsetLeft屬性,表示該元素的左上方與父容器(offsetParent對象)左上方的距離。所以,只需要將這兩個值進行累加,就可以得到該元素的絕對座標。

(圖三 offsetTop和offsetLeft屬性)

下面兩個函數可以用來擷取絕對位置的橫座標和縱座標。

  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對象未必等於父容器,所以上面的函數對於表格和iframe中的元素不適用。

五、擷取網頁元素的相對位置

有了某個元素的絕對位置以後,獲得相對位置就很容易了,只要將絕對座標減去捲軸滾動的距離就可以了。捲軸滾動的垂直距離,是document對象的scrollTop屬性;捲軸滾動的水平距離是document對象的scrollLeft屬性。

(圖四 scrollTop和scrollLeft屬性)

對上一節中的兩個函數進行相應的改寫:

  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屬性是可以賦值的,並且會立即自動滾動網頁到相應位置,因此可以利用它們改變網頁元素的相對位置。另外,element.scrollIntoView()方法也有類似作用,可以使網頁元素出現在瀏覽器視窗的左上方。

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

除了上面的函數以外,還有一種快速方法,可以立刻獲得網頁元素的位置。

那就是使用getBoundingClientRect()方法。它返回一個對象,其中包含了left、right、top、bottom四個屬性,分別對應了該元素的左上方和右下角相對於瀏覽器視窗(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不支援。

(完)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.