欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js獲取元素在瀏覽器中的絕對(duì)位置

 更新時(shí)間：2010年07月24日 00:56:53   作者：  
其原理就是利用HTMLElement.offsetParent屬性，需要的朋友可以參考下。
JavaScript中提供獲取HTML元素位置的屬性：

HTMLElement.offsetLeft
HTMLElement.offsetHeight
但 是需要注意的是，這兩個(gè)屬性所儲(chǔ)存的數(shù)值并不是該元素相對(duì)整個(gè)瀏覽器畫布的絕對(duì)位置，而是相對(duì)于其父元素位置的相對(duì)位置，也就是說這兩個(gè)數(shù)值得到的是以其 父元素左上角為(0,0)點(diǎn)從而計(jì)算出的數(shù)值。那么如何得到一個(gè)HTML元素的絕對(duì)位置呢，可以用以下函數(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，再將其加之，最終遞歸出該元素相對(duì)于整個(gè)瀏覽器畫布的縱坐標(biāo)。橫坐標(biāo)亦然。

相關(guān)文章

  • 深入理解JS addLoadEvent函數(shù)

    深入理解JS addLoadEvent函數(shù)

    下面小編就為大家?guī)硪黄钊肜斫釰S addLoadEvent函數(shù)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-05-05
  • 簡(jiǎn)單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換

    簡(jiǎn)單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換

    這篇文章主要介紹了簡(jiǎn)單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • 基于JavaScript+HTML編寫一個(gè)日期選擇插件

    基于JavaScript+HTML編寫一個(gè)日期選擇插件

    在現(xiàn)代Web應(yīng)用程序中,日期選擇器是一個(gè)非常常見的組件,用戶可以使用它來選擇特定的日期,在本篇文章中,我們將使用JavaScript和HTML來創(chuàng)建一個(gè)簡(jiǎn)單但功能強(qiáng)大的日期選擇插件,這個(gè)日期選擇插件是比較考驗(yàn)Js基本功的,需要的朋友可以參考下
    2023-10-10
  • js中如何對(duì)url進(jìn)行編碼和解碼

    js中如何對(duì)url進(jìn)行編碼和解碼

    這篇文章主要介紹了js中如何對(duì)url進(jìn)行編碼和解碼問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-11-11
  • Javascript document.referrer判斷訪客來源網(wǎng)址

    Javascript document.referrer判斷訪客來源網(wǎng)址

    用簡(jiǎn)單幾行的javascript，就可抓到使用的來源，以及作出一些防范的措施。
    2009-12-12
  • firefox插件Firebug的使用教程

    firefox插件Firebug的使用教程

    Firebug是Firefox下的一款開發(fā)類插件，現(xiàn)屬于Firefox的五星級(jí)強(qiáng)力推薦插件之一。
    2010-01-01
  • JavaScript 繼承詳解（六）

    JavaScript 繼承詳解（六）

    在本章中，我們將分析Prototypejs中關(guān)于JavaScript繼承的實(shí)現(xiàn),需要的朋友可以參考下
    2016-10-10
  • js 判斷附件后綴的簡(jiǎn)單實(shí)現(xiàn)方法

    js 判斷附件后綴的簡(jiǎn)單實(shí)現(xiàn)方法

    下面小編就為大家?guī)硪黄猨s 判斷附件后綴的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-10-10
  • three.js中聚光燈及其屬性介紹小結(jié)

    three.js中聚光燈及其屬性介紹小結(jié)

    本文主要介紹了three.js中聚光燈及其屬性介紹小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • Javascript 同時(shí)提交多個(gè)Web表單的方法

    Javascript 同時(shí)提交多個(gè)Web表單的方法

    1 問題來自一位網(wǎng)友的提問： web頁面里有多個(gè)表單，每個(gè)表單對(duì)應(yīng)著某一類數(shù)據(jù)操作。
    2009-02-02

最新評(píng)論