淺析offsetLeft,Left,clientLeft之間的區(qū)別

假設(shè) obj 為某個 HTML 控件
obj.offsetTop 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算上側(cè)位置,整型,單位像素。
obj.offsetLeft 指 obj 相對于版面或由 offsetParent 屬性指定的父坐標的計算左側(cè)位置,整型,單位像素。
obj.offsetWidth 指 obj 控件自身的絕對寬度,不包括因 overflow 而未顯示的部分,也就是其實際占據(jù)的寬度,整型,單位像素。
obj.offsetHeight 指 obj 控件自身的絕對高度,不包括因 overflow 而未顯示的部分,也就是其實際占據(jù)的高度,整型,單位像素。
我們對前面提到的 offsetParent 作個說明。
offsetParent 獲取定義對象 offsetTop 和 offsetLeft 屬性的容器對象的引用。offsetTop 與 offsetParent 很復(fù)雜,不同瀏覽器有不同解釋,浮動一下解釋又不同了,所以我們一般只要理解通過二者可以獲得控件在瀏覽器中的絕對位置即可。
以上屬性在 FireFox 中也有效。
另外:我們這里所說的是指 HTML 控件的屬性值,并不是 document.body,document.body 的值在不同瀏覽器中有不同解釋(實際上大多數(shù)環(huán)境是由于對 document.body 解釋不同造成的,并不是由于對 offset 解釋不同造成的)
我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置,style.top 也是可以的,二者的區(qū)別是:
一、offsetTop 返回的是數(shù)字,而 style.top 返回的是字符串,除了數(shù)字外還帶有單位:px。
二、offsetTop 只讀,而 style.top 可讀寫。
三、如果沒有給 HTML 元素指定過 top 樣式,則 style.top 返回的是空字符串。
offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。
clientHeight
大家對 clientHeight 都沒有什么異議,都認為是內(nèi)容可視區(qū)域的高度,也就是說頁面瀏覽器中可以看到內(nèi)容的這個區(qū)域的高度,一般是最后一個工具條以下到狀態(tài)欄以上的這個區(qū)域,與頁面內(nèi)容無關(guān)。
offsetHeight
IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。
NS、FF 認為 offsetHeight 是網(wǎng)頁內(nèi)容實際高度,可以小于 clientHeight。
scrollHeight
IE、Opera 認為 scrollHeight 是網(wǎng)頁內(nèi)容實際高度,可以小于 clientHeight。
NS、FF 認為 scrollHeight 是網(wǎng)頁內(nèi)容高度,不過最小值是 clientHeight。
簡單地說
clientHeight 就是透過瀏覽器看內(nèi)容的這個區(qū)域高度。
NS、FF 認為 offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度,只不過當網(wǎng)頁內(nèi)容高度小于等于 clientHeight 時,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 認為 offsetHeight 是可視區(qū)域 clientHeight 滾動條加邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。
說明
以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 則意義又會不同,在 XHTML 中這三個值都是同一個值,都表示內(nèi)容的實際高度。新版本的瀏覽器大多支持根據(jù)頁面指定的 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 設(shè)置了 scrollTop,這些內(nèi)容可能不會完全顯示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
由于為外層元素 p 設(shè)置了 scrollTop,所以內(nèi)層元素會向上卷,這卷起來的部分就是 scrollTop。
scrollLeft 也是類似道理。
我們已經(jīng)知道 offsetHeight 是自身元素的寬度,而 scrollHeight 是內(nèi)部元素的絕對寬度,包含內(nèi)部元素的隱藏的部分。上述中 p 的 scrollHeight 為 300,而 p 的 offsetHeight 為 100。
scrollWidth 也是類似道理。
IE 和 FireFox 全面支持,而 Netscape 8 和 Opera 7.6 不支持 scrollTop、scrollLeft(document.body.scrollTop、document.body.scrollLeft 除外)。
1.clientHeight, clientWidth:
這兩個屬性大體上顯示了元素內(nèi)容的象素高度和寬度.理論上說這些測量不考慮任何通過樣式表加入
元素中的頁邊距,邊框等.
2.clientLeft,clientTop:
這兩個返回的是元素周圍邊框的厚度,如果不指定一個邊框或者不定位改元素,他的值就是0.
3.scrollLeft,scrollTop:
如果元素是可以滾動的,可以通過這倆個屬性得到元素在水平和垂直方向上滾動了多遠,單位是象素.
對于不可以滾動的元素,這些值總是0.
4.scrollHeight,scrollWidth:
不管有多少對象在頁面上可見,他們得到的是整體.
5.style.left:
定位元素與包含它的矩形左邊界的偏移量
6.style.pixelLeft:
返回定位元素左邊界偏移量的整數(shù)像素值.因為屬性的非像素值返回的是包含單位的字符串,例如,30px. 利用這個屬性可以單獨處理以像素為單位的數(shù)值.
7.style:posLetf:
返回定位元素左邊界偏移量的數(shù)量值,不管相應(yīng)的樣式表元素指定什么單位.因為屬性的非位置值返回的是包含單位的字符串,例如,1.2em
top,pixelTop,posTOp這幾個類比就行了.
LEFT: 為從左向右移的位置,即掛件距離屏幕左邊緣的距離;
clientLeft 返回對象的offsetLeft屬性值和到當前窗口左邊的真實值之間的距離
offsetLeft 返回對象相對于父級對象的布局或坐標的left值,就是以父級對象左上角為坐標原點,向右和向下為X、Y軸正方向的x坐標
pixelLeft 設(shè)置或返回對象相對于窗口左邊的位置
scrollWidth 是對象的實際內(nèi)容的寬,不包邊線寬度,會隨對象中內(nèi)容的多少改變(內(nèi)容多了可能會改變對象的實際寬度)。
clientWidth 是對象可見的寬度,不包滾動條等邊線,會隨窗口的顯示大小改變。
offsetWidth 是對象的可見寬度,包滾動條等邊線,會隨窗口的顯示大小改變。
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin屬性,與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))
offsetwidth:是元素相對父元素的偏移寬度。等于border+padding+width
clientwidth:是元素的可見寬度。等于padding+width
scrollwidth:是元素的寬度且包括滾動部分。
offsetLeft:Html元素相對于自己的offsetParent元素的位置
scrollLeft:返回和設(shè)置當前橫向滾動務(wù)的坐標值
<input type="button" value="點一下" onclick="move()">
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<script language="javascript">
function move()
{
var d=document.getElementById("d")
a=eval(20)
d.scrollLeft+=a
}
</script>
保存為網(wǎng)頁,運行一下,點按鈕,滾動條移動
點擊div,先彈出b相對于a的位置,再彈出a相對于窗口的位置
- 獲取offsetTop和offsetLeft值的js代碼(兼容)
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight屬性
- 獲取任意Html元素與body之間的偏移距離 offsetTop、offsetLeft (For:IE5+ FF1 )[
- 詳解 javascript中offsetleft屬性的用法
- javascript中style.left和offsetLeft的用法說明
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft區(qū)別分析
- JavaScript中style.left與offsetLeft的使用及區(qū)別詳解
- 談?wù)剬ffsetleft兼容性的理解
- window.setInterval()方法的定義和用法及offsetLeft與style.left的區(qū)別
- 簡單談?wù)刼ffsetleft、offsetTop和offsetParent
相關(guān)文章
JavaScript中splice與slice的區(qū)別
本文給大家分享的是JavaScript中的splice和slice的用法和區(qū)別,slice()方法和splice()方法都是原生js中對數(shù)組操作的方法,下面我們來詳細探討下2017-05-05js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差別介紹
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差別介紹,需要的朋友可以看看2012-05-05javascript函數(shù)中的arguments參數(shù)
arguments當然只在function體內(nèi)才有意義, arguments.length 返回的是傳入function的實參個數(shù)2010-08-08Adapter適配器模式在JavaScript設(shè)計模式編程中的運用分析
適配器模式的作用是解決兩個軟件實體間的接口不兼容的問題,在JavaScript尤其是AJAX方面比較常用,接下來看一下對Adapter適配器模式在JavaScript設(shè)計模式編程中的運用分析2016-05-05不得不看之JavaScript構(gòu)造函數(shù)及new運算符
這篇文章主要介紹了JavaScript構(gòu)造函數(shù)及new運算符,通過認識new運算符,代碼解讀,重點解析,new存在的意義,總結(jié)等全面介紹了知識點,具體操作步驟大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。2017-08-08