javascript的offset、client、scroll使用方法詳解

offsetTop 指元素距離上方或上層控制的位置，整型，單位像素。 
offsetLeft 指元素距離左方或上層控制的位置，整數，單位像素。 
offsetWidth 指元素控製本身的寬度，整數，單位像素。 
offsetHeight 指元素控製本身的高度，整數，單位像素。
網頁可見區域寬：document.body.clientWidth 
網頁可見區域高：document.body.clientHeight 
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬) 
網頁可見區域高：documight.body.RetHe (包括邊線的寬) 
網頁正文全文寬：document.body.scrollWidth 
網頁正文全文高：document.body.scrollHeight 
網頁被捲去的高：document.body.scrollTop 
網頁被捲去的左：document .body.scrollLeft 
網頁正文部分上：window.screenTop 
網頁正文部分左：window.screenLeft 
屏幕分辨率的高：window.screen.height 
屏幕分辨率的寬：windowscreen.width .區高度：window.screen.availHeight 
螢幕可用工作區寬度：window.screen.availWidth 
這裡說四種瀏覽器對document.body 的clientHeight、offsetHeight 和scrollHeight 的解釋。 
這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
clientHeight 
四種瀏覽器對clientHeight 的解釋都沒有什麼異議，都認為是內容可視區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最後一個工具條以下到狀態列以上的這個區域，與頁面內容無關。 
offsetHeight 
IE、Opera 認為 offsetHeight = clientHeight + 捲軸 + 邊框。 
NS、FF 認為 offsetHeight 是網頁內容實際高度，可以小於 clientHeight。 
scrollHeight 
IE、Opera 認為 scrollHeight 是網頁內容實際高度，可以小於 clientHeight。 
NS、FF 認為 scrollHeight 是網頁內容高度，不過最小值是 clientHeight 
介紹： 
1、offsetLeft 
假設 obj 為某個 HTML 控制項。 
obj.offsetTop 指 obj 距離上方或上層控制的位置，整數，單位像素。 
obj.offsetLeft 指 obj 距離左方或上層控制的位置，整數型，單位像素。 
obj.offsetWidth 指 obj 控制項本身的寬度，整數，單位像素。 
obj.offsetHeight 指 obj 控制項本身的高度，整數，單位像素。 
我們對前面提到的「上方或上層」與「左方或上層」控制項作個說明。 
例如： 

<p id="tool"> 
<input type="button" value="提交"> 
<input type="button" value="重置"> 
</p>

「提交」按鈕的 offsetTop 指「提交」按鈕距「tool」層上邊框的距離，因為距其上方最近的是 “tool” 層的上邊框。 
「重設」按鈕的 offsetTop 指「重設」按鈕與「tool」層上邊框的距離，因為距其上方最近的是 「tool」 層的上方邊框。 
「提交」按鈕的 offsetLeft 指「提交」按鈕距「tool」層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。 
「重置」按鈕的 offsetLeft 指「重置」按鈕距「提交」按鈕右邊框的距離，因為距其左邊最近的是「提交」按鈕的右邊框。 
以上屬性在 FireFox 中也有效。
另外：我們這裡所說的是指HTML 控制項的屬性值，並不是document.body，document.body 的值在不同瀏覽器中有不同解釋（實際上大多數環境是由於對document.body 解釋不同造成的，並不是由於對offset 解釋不同造成的），請點擊這裡查看不同點。
標題：offsetTop 與style.top 的區別 
預備知識：offsetTop、offsetLeft、offsetWidth、offsetHeight 
我們知道offsetTop 可以獲得HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區別是： 
一、offsetTop 回傳的是數字，而style.top 回傳的是字串，除了數字外還帶有單位：px。 
二、offsetTop 只讀，而 style.top 可讀寫。 
三、如果沒有為 HTML 元素指定過 top 樣式，則 style.top 傳回的是空字串。 
offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。
我們這裡說說四種瀏覽器對document.body 的clientHeight、offsetHeight 和scrollHeight 的解釋，這裡說的是document.body，如果是HTML 控件，則又有不同，點擊這裡查看。 
這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
2、clientHeight 
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 的解釋與上方相同，只是把高度換成寬度即可。 
但是 
FF 在不同的 DOCTYPE 中對 clientHeight 的解釋不同， xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問題。
標題：scrollTop、scrollLeft、scrollWidth、scrollHeight 
3、scrollLeft 
scrollTop 是「卷」起來的高度值，範例： 

 

如果為p 設定了scrollTop，這些內容可能不會完全顯示。

 
 
 
p.scrollTop = 10; 
 
由於為外層元素p 設定了scrollTop，所以內層元素會向上捲。 
scrollLeft 也是類似道理。 
我們已經知道 offsetHeight 是自身元素的寬度。 
而 scrollHeight 是內部元素的絕對寬度，包含內部元素的隱藏的部分。 
上述中 p 的 scrollHeight 為 300，而 p 的 offsetHeight 為 100。 
scrollWidth 也是類似道理。 
IE 和 FireFox 全面支持，而 Netscape 和 Opera 不支援 scrollTop、scrollLeft（document.body 除外）。 
標題：offsetTop、offsetLeft、offsetWidth、offsetHeight 
4、clientLeft 🎜返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离，可以理解为边框的长度 
一直以来对offsetLeft，offsetTop，scrollLeft，scrollTop这几个方法很迷糊，花了一天的时间好好的学习了一下．得出了以下的结果： 
1.offsetTop : 
当前对象到其上级层顶部的距离. 
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性. 
2.offsetLeft : 
当前对象到其上级层左边的距离. 
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性. 
3.offsetWidth : 
当前对象的宽度. 
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值 
4.offsetHeight : 
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值 
5.offsetParent : 
当前对象的上级层对象. 
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题. 
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置． 
得到绝对位置脚本代码 

function GetPosition(obj) 
{ 
var left = 0; 
var top = 0; 

while(obj != document.body) 
{ 
left = obj.offsetLeft; 
top = obj.offsetTop; 

obj = obj.offsetParent; 
} 

alert("Left Is : " + left + "\r\n" + "Top Is : " + top); 
}

6.scrollLeft : 
对象的最左边到对象在当前窗口显示的范围内的左边的距离． 
即是在出现了横向滚动条的情况下，滚动条拉动的距离． 
7.scrollTop 
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离． 
即是在出现了纵向滚动条的情况下，滚动条拉动的距离． 
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，点击这里查看。 
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。 
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 滚动条加

更多javascript的offset、client、scroll使用方法詳解相关文章请关注PHP中文网！