JS盒模型屬性(client,scroll,offset家族)
client家族
-
clientWidth:獲取物件的內容可視區域的寬度,即clientWidth=width+左右padding,不包括滾動條。
-
clientHeight:獲取物件的內容可視區域的高度,即clientHeight=height+上下padding,不包括滾動條。
注:與內容是否溢位無關
相容問題
怪異模式與標準模式下獲取clientWidth的方法不一樣
//求瀏覽器視口尺寸 function getViewportOffset(){ if(window.innerWidth){ return { w : window.innerWidth, h : window.innerHeight } }else if(document.compatMode === 'BackCompat'){//怪異模式 return { w : document.body.clientWidth, h : document.body.clientHeight } }else{ //標準模式 document.compatMode === 'CSS1Compat' return { w : document.documentElement.clientWidth, h : document.documentElement.clientWidth } } }
-
clientTop:獲取物件的上邊框的寬度。
-
clientLeft:獲取物件的左邊框的寬度。
scroll家族
-
scrollWidth:獲取物件內容的實際寬度,scrollWidth=左padding+width
-
scrollHeight:獲取物件內容的實際高度,scrollHeight=上padding+height
===============================================
-
scrollTop:頁面卷出視口的高度
-
scrollLeft:頁面卷出視口的寬度
相容問題
//求滾動條滾動距離 function getScrollOffset(){ if(window.pageXOffset){ return { x : window.pageXOffset,//IE8以下不相容 y : window.pageYOffset } }else{ return { x : document.body.scrollLeft + document.documentElement.scrollLeft,//IE8以下用 y : document.body.scrollTop + document.documentElement.scrollTop } } }
offset家族
-
offsetWidth:獲取物件的寬度,即offsetWidth=width+左右padding+左右border。也可以寫成offsetWidth=clientWidth+border。
-
offsetHeight:獲取物件的高度,即offsetHeight=height+上下padding+上下border。也可以寫成offsetHeight=clientHeight+border。
Bug
offsetLeft 指的是元素與offsetParent之間的距離
首先確定offsetParent
在IE8+,等高版本瀏覽器中
假如祖先元素中都沒有定位,offsetParent就是body元素,假如祖先元素中有定位,則以最近的帶有定位的祖先元素為準,與自己是否定位無關
在IE6/7瀏覽器中
自身沒有定位,參考的是最近的有寬高的祖先元素,沒有寬高參考的是body
自身有定位與高版本瀏覽器一致
offsetLeft
IE9+和高版本瀏覽器
元素自身左邊框外部到offsetParent左邊框內部的距離
IE8
比高版本瀏覽器的offsetLeft多一個offsetParent邊框
相容處理:*
1.自身元素相對定位