今天簡要總結一下在DOM中關于樣式的一些屬性。
元素大小
-
偏移量
- offsetHeight：表示元素在垂直方向上占用的空間大小，主要包括元素的高度，水平滾動條的高度和上下表框的高度。
- offsetWidth：元素在水平方向上占用的空間大小，包括元素的寬度，垂直滾動條的寬度，左右邊框的寬度。
- offsetLeft：表示元素距離最近一個有定位父元素的左邊距，距離計算由該元素的外邊框至父元素的內邊框之間的距離。
- offsetTop：表示元素距離最近一個有定位父元素的上邊距，距離計算由該元素的上外邊框至父元素上內邊框之間的距離。
注：其中offsetLeft和offsetTop屬性與包含元素有關，包含元素的引用保存在offsetParent中，offsetParent屬性不一定和parentNode的值相等。
當想知道某個元素在頁面上的便宜量的時候，可以將這個元素的offsetLeft和其offsetParent的相同屬性相加，如此循環至根元素即可。
function getElementLeft(element){
var left = element.offsetLeft
var curEle = element.offsetParent
while(curEle !== null ){
left += curEle.offsetLeft
curEle = curEle.offsetParent
}
return left
}
-
客戶區大小
元素的客戶區大小指的是元素內容及其內邊距所占的空間大小，有關這個的有以下兩個屬性：
- clientWidth：表示元素內容寬度加上左右內邊距寬度。
- clientHeight：表示元素內容高度加上上下內邊距高度。
客戶區大小就是元素內部的空間大小，因此滾動條占用的空間不計算在內。
在確定瀏覽器視口大小可以使用：
document.documentElement或document.body（IE7之前版本）中的clientWidth和clientHeight
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
}
}
}
//這個函數首先檢查document.compatMode屬性，確定瀏覽器是否是在混雜模式下。
-
滾動大小
滾動大小指的是包含滾動內容元素的大小，有些元素沒有執行任何代碼也能自動添加滾動條。
- scrollHeight：在沒有滾動條的情況下，元素內容的總高度。
- scrollWidth：在沒有滾動條的情況下，元素內容的總寬度。
- scrollLeft：被隱藏在內容區域左側的像素數，通過設置這個屬性可以改變元素的滾動位置。
- scrollTop：被隱藏在內容區域上訪的像素數，通過設置這個屬性可以改變元素的滾動位置。
scrollWidth和scrollHeight主要用于確定元素內容的實際大小。通常認為<html>元素是在web瀏覽器的視口中滾動的元素，但是在IE6之前版本運行在混雜模式下是<body>元素。因此帶有垂直滾動條的頁面總高度是：
document.documentElement.scrollHeight
在IE中（標準模式）這兩組屬性不相等，其中scrollWidth和scrollHeight等于文檔內容區域的大小，而clientWidth和clientHeight等于視口大小。
所以在確定文檔的高度的時候，必須取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才可以保證跨瀏覽器的環境下得到精確的結果。
var docH = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
//注意在運行在混雜模式下的IE瀏覽器需要通過document.body來代替document.documentElement
注意，其中scrollHeight和scrollWidth都是可以進行設置的。
-
確定元素大小
在瀏覽器中個每個元素都提供了一個getBoundingClientRect()方法，這個方法會返回一個矩形對象，包含left，top，right，bottom。這些屬性給出了元素在頁面中相對視口的位置，但是瀏覽器的實現稍微有些不同，IE8以及更早版本的IE認為左上角的坐標是（2,2），其他瀏覽器中會返回（0,0）
