DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js獲取元素在浏覽器中的絕對位置
js獲取元素在浏覽器中的絕對位置
編輯:關於JavaScript     
JavaScript中提供獲取HTML元素位置的屬性:

HTMLElement.offsetLeft
HTMLElement.offsetHeight
但 是需要注意的是,這兩個屬性所儲存的數值並不是該元素相對整個浏覽器畫布的絕對位置,而是相對於其父元素位置的相對位置,也就是說這兩個數值得到的是以其 父元素左上角為(0,0)點從而計算出的數值。那麼如何得到一個HTML元素的絕對位置呢,可以用以下函數:

復制代碼 代碼如下:
//獲取元素的縱坐標
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//獲取元素的橫坐標
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

其原理就是利用HTMLElement.offsetParent屬性,如果當前元素的父元素不是空(null),則在原本的offsetTop基礎上加上當前的offsetTop,然後繼續獲取父元素的父元素的offsetTop,再將其加之,最終遞歸出該元素相對於整個浏覽器畫布的縱坐標。橫坐標亦然。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved