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基礎(chǔ)上加上當前的offsetTop，然后繼續(xù)獲取父元素的父元素的offsetTop，再將其加之，最終遞歸出該元素相對于整個瀏覽器畫布的縱坐標。橫坐標亦然。
HTMLElement.offsetLeft
HTMLElement.offsetHeight
但 是需要注意的是，這兩個屬性所儲存的數(shù)值并不是該元素相對整個瀏覽器畫布的絕對位置，而是相對于其父元素位置的相對位置，也就是說這兩個數(shù)值得到的是以其 父元素左上角為(0,0)點從而計算出的數(shù)值。那么如何得到一個HTML元素的絕對位置呢，可以用以下函數(shù)：
復(fù)制代碼 代碼如下:
//獲取元素的縱坐標
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基礎(chǔ)上加上當前的offsetTop，然后繼續(xù)獲取父元素的父元素的offsetTop，再將其加之，最終遞歸出該元素相對于整個瀏覽器畫布的縱坐標。橫坐標亦然。
相關(guān)文章
這篇文章主要介紹了JS獲取鼠標相對位置的方法,涉及javascript事件響應(yīng)及針對頁面元素屬性的動態(tài)操作技巧,需要的朋友可以參考下2016-09-09
用js實現(xiàn)鍵盤記錄，要關(guān)注瀏覽器的三種按鍵事件類型，即keydown，keypress和keyup，它們分別對應(yīng)onkeydown、onkeypress和onkeyup這三個事件句柄。一個典型的按鍵會產(chǎn)生所有這三種事件，依次是keydown，keypress，然后是按鍵釋放時候的keyup。2010-02-02
這篇文章主要介紹了css和js實現(xiàn)彈出登錄居中界面，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-11-11
在做項目的時候，經(jīng)常會需要截取字符串，所以常用的方法有slice()、substr()、substring()、match()方法等，下面通過示例代碼介紹四個方法的使用，感興趣的朋友跟隨小編一起看看吧2023-02-02
JS封裝的三級聯(lián)動菜單(使用時只需要一行js代碼)
在實際的項目開發(fā)中，我們經(jīng)常需要三級聯(lián)動，比如省市區(qū)的選擇，商品的三級分類的選擇等等。這篇文章主要介紹了JS封裝的三級聯(lián)動菜單(使用時只需要一行js代碼)的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章介紹了js 單擊式的下拉菜單效果實例，有需要的朋友可以參考一下2013-08-08
淺談nodeName,nodeValue,nodeType,typeof 的區(qū)別
本文主要簡單介紹了nodeName,nodeValue,nodeType,typeof 的區(qū)別,算是知識點的一個小總結(jié)，希望對小伙伴們有所幫助2015-01-01
firefox下input type="file"的size是多大
firefox對type="file" 的input的width定義目前是不支持的，但是FF支持size屬性，可以給size設(shè)置一個值，來控制上傳框的大小2011-10-10
最近正在做微信小程序，需要實現(xiàn)一個流程進度的圖樣式，下面小編給大家?guī)砹宋⑿判〕绦驅(qū)崿F(xiàn)流程進度的圖樣式功能實例代碼，需要的朋友參考下吧2018-01-01
下面小編就為大家?guī)硪黄猨s 獲取站點應(yīng)用名的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08