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