IT工程師數位筆記本

好好看看下面那張圖，基本上就沒啥問題了！

scrollHeight: 獲取對象的滾動高度。 
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離 
scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離 
scrollWidth:獲取對象的滾動寬度 
offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度 
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置 
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置 
event.clientX 相對文檔的水平座標 
event.clientY 相對文檔的垂直座標 
event.offsetX 相對容器的水平坐標 
event.offsetY 相對容器的垂直坐標 
document.documentElement.scrollTop 垂直方向滾動的值 
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量

頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth   （包含邊線的寬）;
網頁可見區域高： document.body.offsetHeight （包含邊線的寬）;
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被卷去的高： document.body.scrollTop;
網頁被卷去的左： document.body.scrollLeft;
網頁正文項目組上： window.screenTop;
網頁正文項目組左： window.screenLeft;
屏幕辨別率的高： window.screen.height;
屏幕辨別率的寬： window.screen.width;
屏幕可用工作區高度： window.screen.availHeight;

假設 obj 為某個 HTML 控件。

obj.offsetLeft 指 obj 間隔左方或上層控件的地位，整型，單位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

籌辦常識：offsetTop、offsetLeft、offsetWidth、offsetHeight

一、offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。

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

題目：clientHeight、offsetHeight和scrollHeight

瀏覽器分別為IE（Internet Explorer）、Opera、FF（FireFox）。

clientHeight

offsetHeight

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

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

簡單地說

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

題目：scrollTop、scrollLeft、scrollWidth、scrollHeight

scrollTop 是“卷”起來的高度值

scrollLeft 也是類似事理。

而 scrollHeight 是內部元素的絕對寬度，包含內部元素的隱蔽的項目組。

scrollWidth 也是類似事理。

4、clientLeft

一向以來對offsetLeft，offsetTop，scrollLeft，scrollTop這幾個辦法很含混，花了一天的時候好好的進修了一下．得出了以下的成果：

1.offsetTop :

設置對象到頁面頂部的間隔請用style.top屬性.

當前對象到其上級的間隔.

3.offsetWidth :

與style.width屬性的差別在于:如對象的寬度設定值為百分比寬度，則無論頁面變大還是變小，style.width都返回此百分比，而offsetWidth則返回在不合頁面中對象的寬度值而不是百分比值

與style.height屬性的差別在于:如對象的寬度設定值為百分比高度，則無論頁面變大還是變小，style.height都返回此百分比，而offsetHeight則返回在不合頁面中對象的高度值而不是百分比值

5.offsetParent   :

重視.若是對象是包含在一個DIV中時，此DIV不會被當做是此對象的上級層，（即對象的上級層會跳過DIV對象）上級層是Table時則不會有題目.

獲得絕對地位腳本代碼

{var left = 0;

  var top   = 0;

  while（obj != document.body）

        left = obj.offsetLeft;

        top   = obj.offsetTop;

       obj = obj.offsetParent;}

6.scrollLeft :

便是在呈現了橫向遷移轉變條的景象下，遷移轉變條拉動的間隔．

對象的最頂部到對象在當前窗口顯示的局限內的頂邊的間隔．

我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的申明，這里說的是 document.body

clientHeight

offsetHeight

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

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

簡單地說

FF 認為 offsetHeight 和 scrollHeight 都是網頁內容高度，只不過當網頁內容高度小于便是 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

同理

clientWidth、offsetWidth 和 scrollWidth 的申明與上方雷同，只是把高度換成寬度即可。