JS中關於位置和尺寸的api

HTMLElement.offsetParent

　　因爲offsetTop 和 offsetLeft 都是相對於 offsetParent 內邊距邊界的，故offsetParent的意義十分重大。offsetParent的機制與css中包含塊的概念十分相似但並不徹底一致，其不一致有時候是因爲瀏覽器的不一樣而致使的，例如：當元素爲固定定位時(fixed)，chrome瀏覽器的 offsetParent 值爲 Null，而火狐的則爲 body 元素。總結規律以下：

• 規則(當html和body之間的margin被清除時)：

• 	自己定位爲fixed		自己定位非fiexd
  offsetParent	火狐	非火狐	父級無定位	父級有定位
  	body	null	body	有定位的父級

• 儘管自己定位爲fixed時，非火狐瀏覽器爲null，body.offsetTop 和 body.offsetLeft的值仍然爲0（即默認值爲0）。所以，當html和body之間的margin值被清除時，就能夠視爲 offsetLeft 和 offsetTop 也是參照於 body 的。

HTMLElement.offsetLeft

　　 offsetLeft 是一個只讀屬性，返回當前元素左上角相對於 offsetParent 節點的左邊界偏移的像素值。 

HTMLElement.offsetTop

　　offsetTop 爲只讀屬性，它返回當前元素相對於其 offsetParent 元素的頂部的距離。

獲取元素在頁面中的位置

1.獲取絕對位置 --- 原生實現

• while循環疊加offsetParent的offsetTop和offsetLeft計算出元素的絕對位置，元素的 boder 和 margin 會影響這個函數的取值。 不推薦使用

• function getPointAb(node){
      //while循環疊加offsetParent的offsetTop和offsetLeft
      var x =0;
      var y = 0;
      while(node){
          x+=node.offsetLeft;
          y+=node.offsetTop;                    
          node = node.offsetParent;
      }
                  
      return {x:x,y:y};
  }    

2.獲取滾動條滾動的距離

L = document.documentElement.scrollLeft||document.body.scrollLeft;
T = document.documentElement.scrollTop||document.body.scrollTop;

3.獲取相對位置 --- 原生實現

• 在while循環疊加取得絕對位置的基礎上，減去滾動條滾動的距離。沒有辦法兼容border和margin

• //boder margin會影響這個函數的取值
      function getPointRe(node){
      //while循環疊加offsetParent的offsetTop和offsetLeft
          var x =0;
          var y = 0;
          while(node){
              x+=node.offsetLeft;
              y+=node.offsetTop;
                      
              node = node.offsetParent;
      }
                  
      var L = document.documentElement.scrollLeft||document.body.scrollLeft;
      var T = document.documentElement.scrollTop||document.body.scrollTop;
      return {x:x-L,y:y-T};            
  }            

4.Element.getBoundingClientRect() --- 兼容性好

• 返回值：對象
  • width：border-box的寬
  • height：border-box的高
  • top：元素border-box的左上角的相對位置縱座標
  • left：元素border-box的左上角的相對位置橫座標
  • bottom：元素border-box的右下角的相對位置的縱座標
  • right：元素border-box的右下角的相對位置的橫座標

獲取元素尺寸

1.offsetWidth & offsetHeight

• 該屬性是一個只讀屬性，返回一個元素的尺寸（寬度or高度）
• 其返回值爲元素可視區域(padding box)的大小加上邊框的大小，即 padding box(可視區域) + border
• 此屬性會返回一個四捨五入的小數，若想獲得更精確的值，能夠使用 getBoundingClientRect() 方法
• 返回值 = 邊框(border) + 內邊距(padding) + 相應方向滾動條(scrollbar) + CSS設置的寬度(width)或高度(height)的值。

2.clientWidth & clientHeight

• 該屬性表示元素的內部寬度，單位值爲像素
• 此屬性會返回一個四捨五入的小數
• 其返回值爲元素可視區域(padding box)的大小
• 注意：當用此屬性獲取根標籤的大小時，不管根標籤有沒有margin，都會無視margin返回屏幕視口的尺寸（即 document.documentElement.clentWidth 返回該設備屏幕分辨率）

tips：在ie10及ie10如下，根標籤的clientWidth和offsetWidth，統一被指定爲視口的寬度。