offsetLeft,Left,clientLeft的差別jquery浮層居中

假設 obj 為某個 HTML 控件。

obj.offsetTop 指 obj 相對于版面或由 offsetParent 屬性指定的父坐标的計算上側位置，整型，機關像素。

obj.offsetLeft 指 obj 相對于版面或由 offsetParent 屬性指定的父坐标的計算左側位置，整型，機關像素。

obj.offsetWidth 指 obj 控件自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際占據的寬度，整型，機關像素。

obj.offsetHeight 指 obj 控件自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際占據的高度，整型，機關像素。

我們對前面提到的 offsetParent 作個說明。

offsetParent 擷取定義對象 offsetTop 和 offsetLeft 屬性的容器對象的引用。offsetTop 與 offsetParent 很複雜，不同浏覽器有不同解釋，浮動一下解釋又不同了，是以我們一般隻要了解通過二者可以獲得控件在浏覽器中的絕對位置即可。

以上屬性在 FireFox 中也有效。

另外：我們這裡所說的是指 HTML 控件的屬性值，并不是 document.body，document.body 的值在不同浏覽器中有不同解釋（實際上大多數環境是由于對 document.body 解釋不同造成的，并不是由于對 offset 解釋不同造成的）

我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的差別是：

一、offsetTop 傳回的是數字，而 style.top 傳回的是字元串，除了數字外還帶有機關：px。

二、offsetTop 隻讀，而 style.top 可讀寫。

三、如果沒有給 HTML 元素指定過 top 樣式，則 style.top 傳回的是空字元串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。

clientHeight

大家對 clientHeight 都沒有什麼異議，都認為是内容可視區域的高度，也就是說頁面浏覽器中可以看到内容的這個區域的高度，一般是最後一個工具條以下到狀态欄以上的這個區域，與頁面内容無關。

offsetHeight

IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。

NS、FF 認為 offsetHeight 是網頁内容實際高度，可以小于 clientHeight。

scrollHeight

IE、Opera 認為 scrollHeight 是網頁内容實際高度，可以小于 clientHeight。

NS、FF 認為 scrollHeight 是網頁内容高度，不過最小值是 clientHeight。

簡單地說

clientHeight 就是透過浏覽器看内容的這個區域高度。

NS、FF 認為 offsetHeight 和 scrollHeight 都是網頁内容高度，隻不過當網頁内容高度小于等于 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

IE、Opera 認為 offsetHeight 是可視區域 clientHeight 滾動條加邊框。scrollHeight 則是網頁内容實際高度。

同理

clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同，隻是把高度換成寬度即可。

說明

以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 則意義又會不同，在 XHTML 中這三個值都是同一個值，都表示内容的實際高度。新版本的浏覽器大多支援根據頁面指定的 DOCTYPE 來啟用不同的解釋器

scrollTop 是“卷”起來的高度值，示例：

<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">

<div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果為 p 設定了 scrollTop，這些内容可能不會完全顯示。</div>

</div>

<script type="text/javascript">

var p = document.getElementById("p");

p.scrollTop = 10;

</script>

由于為外層元素 p 設定了 scrollTop，是以内層元素會向上卷，這卷起來的部分就是 scrollTop。

scrollLeft 也是類似道理。

我們已經知道 offsetHeight 是自身元素的寬度，而 scrollHeight 是内部元素的絕對寬度，包含内部元素的隐藏的部分。上述中 p 的 scrollHeight 為 300，而 p 的 offsetHeight 為 100。

scrollWidth 也是類似道理。

IE 和 FireFox 全面支援，而 Netscape 8 和 Opera 7.6 不支援 scrollTop、scrollLeft（document.body.scrollTop、document.body.scrollLeft 除外）。

$("#TipsWin").css("left",(($(document).width())/2-(parseInt(div寬度)/2))+"px");