首頁  >  文章  >  web前端  >  用JavaScript取得DOM元素位置與尺寸大小的方法_基礎知識

用JavaScript取得DOM元素位置與尺寸大小的方法_基礎知識

WBOY
WBOY原創
2016-05-16 17:37:241625瀏覽

在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识。

基础概念

为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性

offsetWidth

clientWidth

scrollWidth

offsetHeight

clientHeight

scrollHeight

offsetLeft

clientLeft

scrollLeft

offsetTop

clientTop

scrollTop


為了理解這些屬性,我們需要知道HTML元素的實際內容有可能比分配用來容納內容的盒子更大,因此可能會出現滾動條,內容區域是視口,當實際內容比視口大的時候,需要把元素的捲軸位置考慮進去。

1. clientHeight和clientWidth用於描述元素內尺寸,是指 元素內容 內邊距 大小,不包括邊框(IE下實際包括)、外邊距、捲軸部分

2. offsetHeight和offsetWidth用來描述元素外尺寸,是指 元素內容 內邊距 邊框,不包括外邊距和捲軸部分

3. clientTop和clientLeft回到內邊距的邊緣和邊框的外邊緣之間的水平和垂直距離,也就是左,上邊框寬度

4. offsetTop和offsetLeft表示該元素的左上角(邊框外緣)與已定位的父容器(offsetParent物件)左上角的距離

5. offsetParent物件是指元素最近的定位(relative,absolute)祖先元素,遞歸上溯,如果沒有祖先元素是定位的話,會回傳null

寫個小範例方便理解

複製程式碼 程式碼如下:


程式碼如下:



       

  > 程式碼如下:




       
複製程式碼 程式碼如下:



在FireFox和IE10(IE10以下版本盒模型和W3C標準不一致,不加討論,相容性問題下面會介紹到)下得到結果scrollHeight: 494,而在Chrome和Safari下得到結果scrollHeight: 502,差了8px,根據8可以簡單推測是divParent的padding,來算一下是不是

我們可以看看它們的結果是怎麼來的,首先scrollHeight肯定包含了divDisplay所需的高度 400px的高度 上下各10px的padding 上下各3px的border 上下各30px的margin,這樣

400 10*2 3*2 30*2=486

這樣486 8=494, 486 8*2=502果實真是這樣,

在FireFox和IE10下沒有計算下padding

有了這些基本知識後,我們就可以計算元素的位置和尺寸了。

相對於文件與視口的座標

當我們計算一個DOM元素位置也就是座標的時候,會牽涉到兩種座標系,文件座標和視口座標。

我們常用到的document就是整個頁面部分,而不僅僅是視窗可見部分,還包括因為視窗大小限製而出現捲軸的部分,它的左上角就是我們所謂相對於文檔座標的原點。

視窗是顯示文件內容的瀏覽器的一部分,它不包括瀏覽器外殼(選單,工具欄,狀態列等),也就是目前視窗顯示頁面部分,不包括捲軸。

如果文件比視口小,表示沒有出現滾動,文件左上角和視口左上角相同,一般來講在兩種座標系之間進行切換,需要加上或減去滾動的偏移量( scroll offset)。

為了在座標系之間進行轉換,我們需要判定瀏覽器視窗的捲軸位置。 window物件的pageXoffset和pageYoffset提供這些值,IE 8及更早版本除外。也可以透過scrollLeft和scrollTop屬性來取得滾動條位置,正常情況下透過查詢文檔根節點(document.documentElement)來取得這些屬性值,但在怪異模式下必須透過文件的body上查詢。

複製程式碼 程式碼如下:

function getScrollOffsets(w) {
            var w = w || window;
               return { x: w.pageXoffset, y: pageYoffset };
            }
            var d = w.document;                return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop };
            return { x: d.body.scrollLeft, y: d.body.scrollTop };
        }

        }

      🎜>

複製碼 程式碼如下:f w || window;
            if (w.innerWidth != null)
                  var d = w.document;
            if ( document.compatMode == "CSS1Compat")
                return { w: d.documentElement.clientWidth, h: d.S. .clientWidth, h: d.body. clientHeight };
        }



文件座標


任何HTML元素都有offectLeft和offectTop屬性傳回元素的X和Y座標,對於許多元素,這些值是文件座標,但是對於以定位元素後代及一些其他元素(表格單元),傳回相對於祖先的座標。我們可以用簡單的遞歸上溯累加來計算

複製程式碼

程式碼如下:f 0, y = 0;            while (e != null) {              y = e, offsetTop;                e = e.offsetParent;
      e = e.offsetParent;
      e = e.offsetParent;
    >            return { x: x, y: y };
        }


儘管如此,這個函數總是計算正確的值不能正常運作了,我們只能在沒有捲軸的情況下使用這個方法,不過我們用這個原理算出一些元素相對於某個父元素的座標。


視口座標

計算視口座標就相對簡單了很多,可以透過呼叫元素的getBoundingClientRect方法。方法傳回一個有left、right、top、bottom屬性的對象,分別表示元素四個位置的相對於視口的座標。 getBoundingClientRect所傳回的座標包含元素的內邊距和邊框,不包含外邊距。相容性很好,非常好用

元素尺寸

由上面計算座標方法,我們可以方便得出元素尺寸。在符合W3C標準的瀏覽器中getBoundingClientRect傳回的物件還包括width和height,但在原始IE中未實現,但是透過傳回物件的right-left和bottom-top可以方便計算出。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn