js中的各種“位置”——“top、clientTop、scrollTop、offsetTop……

 

 

============================分割線======================================

offsetParent:該屬性返回一個對象的引用,這個對象是距離調用offsetParent的元素最近的(在包含層次中最靠近的),已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值爲body元素的引用。 當容器元素的style.display 被設置爲 "none"時(譯註:IE和Opera除外),offsetParent屬性 返回 null。

 top:該屬性一般對用過css定位的元素有效(position爲“static”時爲auto,不產生效果),定義了一個top屬性有效的元素(即定位元素)的上外邊距邊界與其包含塊上邊界之間的偏移。

clientTop:元素上邊框的厚度,當沒有指定邊框厚底時,一般爲0。

scrollTop:位於對象最頂端和窗口中可見內容的最頂端之間的距離,簡單地說就是滾動後被隱藏的高度。

offsetTop:獲取對象相對於由offsetParent屬性指定的父座標(css定位的元素或body元素)距離頂端的高度。

clientHeight:內容可視區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最後一個工具條以下到狀態欄以上的這個區域,與頁面內容無關。

scrollHeight:IE、Opera 認爲 scrollHeight 是網頁內容實際高度,可以小於 clientHeight。FF 認爲 scrollHeight 是網頁內容高度,不過最小值是 clientHeight。

offsetHeight:獲取對象相對於由offsetParent屬性指定的父座標(css定位的元素或body元素)的高度。IE、Opera 認爲 offsetHeight = clientHeight + 滾動條 + 邊框。FF 認爲 offsetHeight 是網頁內容實際高度,可以小於 clientHeight。offsetHeight在新版本的FF和IE中是一樣的,表示網頁的高度,與滾動條無關,chrome中不包括滾動條。

 *諸如left、clientLeft、offsetLeft、clientWidth、scrollWidth等,和top、height類似,不再贅述。

============================分割線=====================================

clientX、clientY:相對於瀏覽器窗口可視區域的X,Y座標(窗口座標),可視區域不包括工具欄和滾動條。IE事件和標準事件都定義了這2個屬性。

pageX、pageY:類似於event.clientX、event.clientY,但它們使用的是文檔座標而非窗口座標。這2個屬性不是標準屬性,但得到了廣泛支持。IE事件中沒有這2個屬性。

offsetX、offsetY:相對於事件源元素(target或srcElement)的X,Y座標,只有IE事件有這2個屬性,標準事件沒有對應的屬性。

screenX、screenY:相對於用戶顯示器屏幕左上角的X,Y座標。標準事件和IE事件都定義了這2個屬性

 

 

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