js獲取元素在瀏覽器中的絕對位置
更新時間：2010年07月24日 00:56:53 作者：
其原理就是利用HTMLElement.offsetParent屬性，需要的朋友可以參考下。
JavaScript中提供獲取HTML元素位置的屬性：
HTMLElement.offsetLeft
HTMLElement.offsetHeight
但 是需要注意的是，這兩個屬性所儲存的數(shù)值并不是該元素相對整個瀏覽器畫布的絕對位置，而是相對于其父元素位置的相對位置，也就是說這兩個數(shù)值得到的是以其 父元素左上角為(0,0)點從而計算出的數(shù)值。那么如何得到一個HTML元素的絕對位置呢，可以用以下函數(shù)：
//獲取元素的縱坐標
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，然后繼續(xù)獲取父元素的父元素的offsetTop，再將其加之，最終遞歸出該元素相對于整個瀏覽器畫布的縱坐標。橫坐標亦然。
HTMLElement.offsetLeft
HTMLElement.offsetHeight
但 是需要注意的是，這兩個屬性所儲存的數(shù)值并不是該元素相對整個瀏覽器畫布的絕對位置，而是相對于其父元素位置的相對位置，也就是說這兩個數(shù)值得到的是以其 父元素左上角為(0,0)點從而計算出的數(shù)值。那么如何得到一個HTML元素的絕對位置呢，可以用以下函數(shù)：
復制代碼 代碼如下:
//獲取元素的縱坐標
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，然后繼續(xù)獲取父元素的父元素的offsetTop，再將其加之，最終遞歸出該元素相對于整個瀏覽器畫布的縱坐標。橫坐標亦然。
相關文章
下面小編就為大家?guī)硪黄钊肜斫釰S addLoadEvent函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
簡單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換
這篇文章主要介紹了簡單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換的相關資料,需要的朋友可以參考下2015-12-12
在現(xiàn)代Web應用程序中,日期選擇器是一個非常常見的組件,用戶可以使用它來選擇特定的日期,在本篇文章中,我們將使用JavaScript和HTML來創(chuàng)建一個簡單但功能強大的日期選擇插件,這個日期選擇插件是比較考驗Js基本功的,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了js中如何對url進行編碼和解碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
Javascript document.referrer判斷訪客來源網(wǎng)址
用簡單幾行的javascript，就可抓到使用的來源，以及作出一些防范的措施。2009-12-12
Firebug是Firefox下的一款開發(fā)類插件，現(xiàn)屬于Firefox的五星級強力推薦插件之一。2010-01-01
在本章中，我們將分析Prototypejs中關于JavaScript繼承的實現(xiàn),需要的朋友可以參考下2016-10-10
下面小編就為大家?guī)硪黄猨s 判斷附件后綴的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
本文主要介紹了three.js中聚光燈及其屬性介紹小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
1 問題來自一位網(wǎng)友的提問： web頁面里有多個表單，每個表單對應著某一類數(shù)據(jù)操作。2009-02-02