首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 17:45:55
原創
1005 人瀏覽過

javascript的offset、client、scroll使用方法 - quansenw - 网站编程资料库
 
offsetTop 指元素距离上方或上层控件的位置,整型,单位像素。
offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素。
offsetWidth 指元素控件自身的宽度,整型,单位像素。
offsetHeight 指元素控件自身的高度,整型,单位像素。
网页可见区域宽: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
屏幕可用工作区宽度: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 控件自身的高度,整型,单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如




“提交”按钮的 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 也是同样道理。
标题:clientHeight、offsetHeight和scrollHeight
我们这里说说四种浏览器对 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,所以內層元素會往上捲。
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 Getbe> )
{
var left = 0;
var top = 0;

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

obj = obj.offsetParent;
}

alert("Left Is : " left "rn" "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 捲軸加
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板