轉(zhuǎn)

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

這里是javascript中建造遷移轉(zhuǎn)變代碼的常用屬性
頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth   （包含邊線的寬）;
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight （包含邊線的寬）;
網(wǎng)頁正文全文寬： document.body.scrollWidth;
網(wǎng)頁正文全文高： document.body.scrollHeight;
網(wǎng)頁被卷去的高： document.body.scrollTop;
網(wǎng)頁被卷去的左： document.body.scrollLeft;
網(wǎng)頁正文項(xiàng)目組上： window.screenTop;
網(wǎng)頁正文項(xiàng)目組左： window.screenLeft;
屏幕辨別率的高： window.screen.height;
屏幕辨別率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;

1、offsetLeft

假設(shè) obj 為某個 HTML 控件。

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

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

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

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

我們對前面提到的“上方或上層”與“左方或上層”控件作個申明。

例如：

“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的間隔，因?yàn)榫嗥渖线叡葋淼氖?“tool” 層的上邊框。

“重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的間隔，因?yàn)榫嗥渖线叡葋淼氖?“tool” 層的上邊框。

“提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的間隔，因?yàn)榫嗥渥筮叡葋淼氖?“tool” 層的左邊框。

“重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的間隔，因?yàn)榫嗥渥筮叡葋淼氖?ldquo;提交”按鈕的右邊框。

以上屬性在 FireFox 中也有效。

另 外：我們這里所說的是指 HTML 控件的屬性值，并不是 document.body，document.body 的值在不合瀏覽器中有不合申明（實(shí)際上大多半景象是因?yàn)閷?document.body 申明不合造成的，并不是因?yàn)閷?offset 申明不合造成的），點(diǎn)擊這里查看不合點(diǎn)。

題目：offsetTop 與 style.top 的差別

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

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

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

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

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

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

題目：clientHeight、offsetHeight和scrollHeight

我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的申明，這里說的是 document.body，若是是 HTML 控件，則又有不合，點(diǎn)擊這里查看。

這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

2、clientHeight

clientHeight

大師對 clientHeight 都沒有什么貳言，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個區(qū)域的高度，一般是最后一個對象條以下到狀況欄以上的這個區(qū)域，與頁面內(nèi)容無關(guān)。

offsetHeight

IE、Opera 認(rèn)為 offsetHeight = clientHeight + 遷移轉(zhuǎn)變條 + 邊框。

NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。

scrollHeight

IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。

NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。

簡單地說

clientHeight 就是透過瀏覽器看內(nèi)容的這個區(qū)域高度。

NS、 FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度小于便是 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 遷移轉(zhuǎn)變條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實(shí)際高度。

同理

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

然則

FF 在不合的 DOCTYPE 中對 clientHeight 的申明不合， xhtml 1 trasitional 中則不是如上申明的。其它瀏覽器則不存在此題目。

題目：scrollTop、scrollLeft、scrollWidth、scrollHeight

3、scrollLeft

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

因?yàn)闉橥鈱釉?p 設(shè)置了 scrollTop，所以內(nèi)層元素會向上卷。

scrollLeft 也是類似事理。

我們已經(jīng)知道 offsetHeight 是自身元素的寬度。

而 scrollHeight 是內(nèi)部元素的絕對寬度，包含內(nèi)部元素的隱蔽的項(xiàng)目組。

上述中 p 的 scrollHeight 為 300，而 p 的 offsetHeight 為 100。

scrollWidth 也是類似事理。

IE 和 FireFox 周全支撐，而 Netscape 和 Opera 不支撐 scrollTop、scrollLeft（document.body 除外）。

揭曉時候：2007-10-15 20:20:16

題目：offsetTop、offsetLeft、offsetWidth、offsetHeight

4、clientLeft

返回對象的offsetLeft屬性值和到當(dāng)前窗口左邊的真實(shí)值之間的間隔，可以懂得為邊框的長度

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

1.offsetTop     :

當(dāng)前對象到其上級層頂部的間隔.

不克不及對其進(jìn)行賦值.設(shè)置對象到頁面頂部的間隔請用style.top屬性.

2.offsetLeft :

當(dāng)前對象到其上級層左邊的間隔.

不克不及對其進(jìn)行賦值.設(shè)置對象到頁面左部的間隔請用style.left屬性.

3.offsetWidth :

當(dāng)前對象的寬度.

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

4.offsetHeight :

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

5.offsetParent   :

當(dāng)前對象的上級層對象.

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

哄騙這個屬性，可以獲得當(dāng)前對象在不合大小的頁面中的絕對地位．

獲得絕對地位腳本代碼

1function GetPosition（obj）

2{

3 var left = 0;

4 var top   = 0;

5

6 while（obj != document.body）

7 {

8        left = obj.offsetLeft;

9        top   = obj.offsetTop;

10

11        obj = obj.offsetParent;

12 }

13

14 alert（"Left Is : " + left + "\r\n" + "Top   Is : " + top）;

15}

6.scrollLeft :

對象的最左邊到對象在當(dāng)前窗口顯示的局限內(nèi)的左邊的間隔．

便是在呈現(xiàn)了橫向遷移轉(zhuǎn)變條的景象下，遷移轉(zhuǎn)變條拉動的間隔．

7.scrollTop

對象的最頂部到對象在當(dāng)前窗口顯示的局限內(nèi)的頂邊的間隔．

便是在呈現(xiàn)了縱向遷移轉(zhuǎn)變條的景象下，遷移轉(zhuǎn)變條拉動的間隔．

我們這里說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的申明，這里說的是 document.body，若是是 HTML 控件，則又有不合，點(diǎn)擊這里查看。

這四種瀏覽器分別為IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight

大師對 clientHeight 都沒有什么貳言，都認(rèn)為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個區(qū)域的高度，一般是最后一個對象條以下到狀況欄以上的這個區(qū)域，與頁面內(nèi)容無關(guān)。

offsetHeight

IE、Opera 認(rèn)為 offsetHeight = clientHeight + 遷移轉(zhuǎn)變條 + 邊框。

NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。

scrollHeight

IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容實(shí)際高度，可以小于 clientHeight。

NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。

簡單地說

clientHeight 就是透過瀏覽器看內(nèi)容的這個區(qū)域高度。

NS、 FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度小于便是 clientHeight 時，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。

IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 遷移轉(zhuǎn)變條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實(shí)際高度。

同理

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