HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距離之全然具體解釋



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 相對文檔的水平座標+垂直方向滾動的量 



  以上主要指IE之中,FireFox差異例如以下:

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均無關)

 

 

onMouseover當鼠標經過的時候,觸發 = 後面的腳本函數 
onMouseout 當鼠標離開 。。 
onMouseUP 當鼠標 按下又擡起。。。 
當鼠標移動。。 
當鼠標按下時。。

 

如果 obj 爲某個 HTML 控件。

obj.offsetTop 指 obj 相對於版面或由 offsetParent 屬性指定的父座標的計算上側位置,整型,單位像素。

obj.offsetLeft 指 obj 相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置,整型,單位像素。

obj.offsetWidth 指 obj 控件自身的絕對寬度,不包含因 overflow 而未顯示的部分,也就是事實上際佔領的寬度,整型,單位像素。

obj.offsetHeight 指 obj 控件自身的絕對高度,不包含因 overflow 而未顯示的部分,也就是事實上際佔領的高度,整型,單位像素。

我們對前面提到的 offsetParent 作個說明。

offsetParent 獲取定義對象 offsetTop 和 offsetLeft 屬性的容器對象的引用。offsetTop 與 offsetParent 非常複雜,不同瀏覽器有不同解釋,浮動一下解釋又不同了,所以我們一般僅僅要理解通過二者能夠獲得控件在瀏覽器中的絕對位置就可以。

以上屬性在 FireFox 中也有效。

另外:我們這裏所說的是指 HTML 控件的屬性值,並非 document.body,document.body 的值在不同瀏覽器中有不同解釋(實際上大多數環境是因爲對 document.body 解釋不同造成的,並非因爲對 offset 解釋不同造成的)

 

 

我們知道 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
大家對 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 的解釋與上面同樣,僅僅是把高度換成寬度就可以。

說明
以上基於 DTD HTML 4.01 Transitional,假設是 DTD XHTML 1.0 Transitional 則意義又會不同,在 XHTML 中這三個值都是同一個值,都表示內容的實際高度。新版本號的瀏覽器大多支持依據頁面指定的 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 設置了 scrollTop,這些內容可能不會全然顯示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>

因爲爲外層元素 p 設置了 scrollTop,所以內層元素會向上卷,這捲起來的部分就是 scrollTop。

scrollLeft 也是相似道理。

我們已經知道 offsetHeight 是自身元素的寬度,而 scrollHeight 是內部元素的絕對寬度,包括內部元素的隱藏的部分。上述中 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: 
這兩個屬性大體上顯示了元素內容的象素高度和寬度.理論上說這些測量不考慮不論什麼通過樣式表增加 
元素中的頁邊距,邊框等.

2.clientLeft,clientTop: 
這兩個返回的是元素周圍邊框的厚度,假設不指定一個邊框或者不定位改元素,他的值就是0.

3.scrollLeft,scrollTop: 
假設元素是能夠滾動的,能夠通過這倆個屬性得到元素在水平和垂直方向上滾動了多遠,單位是象素. 
對於不能夠滾動的元素,這些值總是0.

4.scrollHeight,scrollWidth: 
無論有多少對象在頁面上可見,他們得到的是總體.

5.style.left: 
定位元素與包括它的矩形左邊界的偏移量

6.style.pixelLeft: 
返回定位元素左邊界偏移量的整數像素值.由於屬性的非像素值返回的是包括單位的字符串,比如,30px. 利用這個屬性能夠單獨處理以像素爲單位的數值.

7.style:posLetf: 
返回定位元素左邊界偏移量的數量值,無論對應的樣式表元素指定什麼單位.由於屬性的非位置值返回的是包括單位的字符串,比如,1.2em   
    
top,pixelTop,posTOp這幾個類比即可了.
LEFT:   爲從左向右移的位置,即掛件距離屏幕左邊緣的距離; 
clientLeft   返回對象的offsetLeft屬性值和到當前窗體左邊的真實值之間的距離 
offsetLeft   返回對象相對於父級對象的佈局或座標的left值,就是以父級對象左上角爲座標原點,向右和向下爲X、Y軸正方向的x座標 
pixelLeft   設置或返回對象相對於窗體左邊的位置
scrollWidth 是對象的實際內容的寬,不包邊線寬度,會隨對象中內容的多少改變(內容多了可能會改變對象的實際寬度)。
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均無關)

offsetwidth:是元素相對父元素的偏移寬度。等於border+padding+width
clientwidth:是元素的可見寬度。等於padding+width
scrollwidth:是元素的寬度且包含滾動部分。
offsetLeft:Html元素相對於自己的offsetParent元素的位置 
scrollLeft:返回和設置當前橫向滾動務的座標值

<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>

保存爲網頁,執行一下,點button,滾動欄移動 
點擊div,先彈出b相對於a的位置,再彈出a相對於窗體的位置

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章