快捷導(dǎo)航

js獲取元素在瀏覽器中的絕對位置

更新時(shí)間：2010年07月24日 00:56:53 作者：

其原理就是利用HTMLElement.offsetParent屬性，需要的朋友可以參考下。

JavaScript中提供獲取HTML元素位置的屬性：

HTMLElement.offsetLeft
HTMLElement.offsetHeight
但是需要注意的是，這兩個(gè)屬性所儲(chǔ)存的數(shù)值并不是該元素相對整個(gè)瀏覽器畫布的絕對位置，而是相對于其父元素位置的相對位置，也就是說這兩個(gè)數(shù)值得到的是以其父元素左上角為(0,0)點(diǎn)從而計(jì)算出的數(shù)值。那么如何得到一個(gè)HTML元素的絕對位置呢，可以用以下函數(shù)：

復(fù)制代碼代碼如下:

 
//獲取元素的縱坐標(biāo) 
function getTop(e){ 
var offset=e.offsetTop; 
if(e.offsetParent!=null) offset+=getTop(e.offsetParent); 
return offset; 
} 
//獲取元素的橫坐標(biāo) 
function getLeft(e){ 
var offset=e.offsetLeft; 
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); 
return offset; 
} 

其原理就是利用HTMLElement.offsetParent屬性，如果當(dāng)前元素的父元素不是空（null），則在原本的offsetTop基礎(chǔ)上加上當(dāng)前的offsetTop，然后繼續(xù)獲取父元素的父元素的offsetTop，再將其加之，最終遞歸出該元素相對于整個(gè)瀏覽器畫布的縱坐標(biāo)。橫坐標(biāo)亦然。

您可能感興趣的文章:

相關(guān)文章

JS獲取鼠標(biāo)相對位置的方法
這篇文章主要介紹了JS獲取鼠標(biāo)相對位置的方法,涉及javascript事件響應(yīng)及針對頁面元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2016-09-09
js 鍵盤記錄實(shí)現(xiàn)(兼容FireFox和IE)
用js實(shí)現(xiàn)鍵盤記錄，要關(guān)注瀏覽器的三種按鍵事件類型，即keydown，keypress和keyup，它們分別對應(yīng)onkeydown、onkeypress和onkeyup這三個(gè)事件句柄。一個(gè)典型的按鍵會(huì)產(chǎn)生所有這三種事件，依次是keydown，keypress，然后是按鍵釋放時(shí)候的keyup。
2010-02-02
css和js實(shí)現(xiàn)彈出登錄居中界面完整代碼
這篇文章主要介紹了css和js實(shí)現(xiàn)彈出登錄居中界面，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2017-11-11
JS常用的4種截取字符串方法
在做項(xiàng)目的時(shí)候，經(jīng)常會(huì)需要截取字符串，所以常用的方法有slice()、substr()、substring()、match()方法等，下面通過示例代碼介紹四個(gè)方法的使用，感興趣的朋友跟隨小編一起看看吧
2023-02-02
JS封裝的三級聯(lián)動(dòng)菜單(使用時(shí)只需要一行js代碼)
在實(shí)際的項(xiàng)目開發(fā)中，我們經(jīng)常需要三級聯(lián)動(dòng)，比如省市區(qū)的選擇，商品的三級分類的選擇等等。這篇文章主要介紹了JS封裝的三級聯(lián)動(dòng)菜單(使用時(shí)只需要一行js代碼)的相關(guān)資料,需要的朋友可以參考下
2016-10-10
js 單擊式的下拉菜單效果實(shí)例
這篇文章介紹了js 單擊式的下拉菜單效果實(shí)例，有需要的朋友可以參考一下
2013-08-08
淺談nodeName,nodeValue,nodeType,typeof 的區(qū)別
本文主要簡單介紹了nodeName,nodeValue,nodeType,typeof 的區(qū)別,算是知識(shí)點(diǎn)的一個(gè)小總結(jié)，希望對小伙伴們有所幫助
2015-01-01
firefox下input type="file"的size是多大
firefox對type="file" 的input的width定義目前是不支持的，但是FF支持size屬性，可以給size設(shè)置一個(gè)值，來控制上傳框的大小
2011-10-10
微信小程序?qū)崿F(xiàn)流程進(jìn)度的圖樣式功能
最近正在做微信小程序，需要實(shí)現(xiàn)一個(gè)流程進(jìn)度的圖樣式，下面小編給大家?guī)砹宋⑿判〕绦驅(qū)崿F(xiàn)流程進(jìn)度的圖樣式功能實(shí)例代碼，需要的朋友參考下吧
2018-01-01
js 獲取站點(diǎn)應(yīng)用名的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s 獲取站點(diǎn)應(yīng)用名的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08