獲取元素距離瀏覽器周邊的位置的方法getBoundingClientRect
更新時(shí)間：2013年04月17日 11:40:15 作者：
本文為大家介紹下如何使用getBoundingClientRect()方法獲取元素距離瀏覽器周邊的位置，有類似問題的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js有所幫助
復(fù)制代碼 代碼如下:
var box = document.getElementById( "gaga1" );
/* alert( box.getBoundingClientRect().top );
alert( box.getBoundingClientRect().right );
alert( box.getBoundingClientRect().bottom );
alert( box.getBoundingClientRect().left ) */
function getRect( elements ){
var rect = elements.getBoundingClientRect();
var clientTop = document.documentElement.clientTop;
var clientLeft = document.documentElement.clientLeft;
return { // 兼容ie多出的兩個(gè)px
top : rect.top - clientTop, // 距離頂部的位置
bottom : rect.bottom - clientTop, // 距離頂部加上元素本身的高度就等于bottom的位置
left : rect.left - clientLeft, // 距離左邊的位置
right : rect.right - clientLeft // 距離右邊的位置就是 距離左邊的位置加上元素本身的寬度
};
};
alert( getRect(box).top )
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了JS執(zhí)行刪除前如何實(shí)現(xiàn)判斷,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了js生成二維碼的示例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
TypeScript中的互斥類型實(shí)現(xiàn)方法示例
用了一年時(shí)間的TypeScript了,下面這篇文章主要給大家介紹了關(guān)于TypeScript中互斥類型實(shí)現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
layui table復(fù)選框禁止某幾條勾選的實(shí)例
今天小編就為大家分享一篇layui table復(fù)選框禁止某幾條勾選的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
uniapp電商小程序?qū)崿F(xiàn)訂單30分鐘倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了uniapp電商小程序?qū)崿F(xiàn)訂單30分鐘倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
限制頁面顯示的字符長度，一直被眾多網(wǎng)友傾睬，本人也是一fans利用閑暇時(shí)間搜集整理了一些實(shí)用技巧,需要了解的朋友可以參考下2012-12-12
js 回車提交一些新手朋友還是比較陌生的，本文介紹兩種實(shí)現(xiàn)方法:jQuery方法、JavaScript方法,感興趣的朋友可以研究下2012-12-12
js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果
這篇文章主要介紹了js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了es6 symbol的實(shí)現(xiàn)方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本文主要介紹了TypeScript基本數(shù)據(jù)類型的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03