在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识。
基础概念
为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性
offsetWidth |
clientWidth |
scrollWidth |
offsetHeight |
clientHeight |
scrollHeight |
offsetLeft |
clientLeft |
scrollLeft |
offsetTop |
clientTop |
scrollTop |
1. clientHeight和clientWidth用於描述元素內尺寸,是指 元素內容 內邊距 大小,不包括邊框(IE下實際包括)、外邊距、捲軸部分
2. offsetHeight和offsetWidth用來描述元素外尺寸,是指 元素內容 內邊距 邊框,不包括外邊距和捲軸部分
3. clientTop和clientLeft回到內邊距的邊緣和邊框的外邊緣之間的水平和垂直距離,也就是左,上邊框寬度
4. offsetTop和offsetLeft表示該元素的左上角(邊框外緣)與已定位的父容器(offsetParent物件)左上角的距離
5. offsetParent物件是指元素最近的定位(relative,absolute)祖先元素,遞歸上溯,如果沒有祖先元素是定位的話,會回傳null
寫個小範例方便理解
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上查詢。
複製程式碼
元素尺寸
由上面計算座標方法,我們可以方便得出元素尺寸。在符合W3C標準的瀏覽器中getBoundingClientRect傳回的物件還包括width和height,但在原始IE中未實現,但是透過傳回物件的right-left和bottom-top可以方便計算出。