獲取元素距離瀏覽器周邊的位置的方法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 )
您可能感興趣的文章:
相關文章
DeviceOne 讓你一見鐘情的App快速開發(fā)平臺
DeviceOne是一個非常先進的App開發(fā)平臺,使用Javascript 構建原生體驗的移動應用程序,DeviceOne主要關注外觀和體驗,以及和你的應用程序的 UI 交互2016-02-02JavaScript實現(xiàn)創(chuàng)建自定義對象的常用方式總結
這篇文章主要介紹了JavaScript實現(xiàn)創(chuàng)建自定義對象的常用方式,結合實例形式總結分析了JavaScript工廠模式、構造函數(shù)模式、原型模式、組合模式等常用的自定義對象創(chuàng)建模式操作與使用技巧,需要的朋友可以參考下2018-07-07JS中使用apply方法通過不同數(shù)量的參數(shù)調(diào)用函數(shù)的方法
這篇文章主要介紹了JS中使用apply方法通過不同數(shù)量的參數(shù)調(diào)用函數(shù)的方法的相關資料,需要的朋友可以參考下2016-05-05跟我學習javascript的函數(shù)調(diào)用和構造函數(shù)調(diào)用
跟我學習javascript的函數(shù)和構造函數(shù)調(diào)用,主要包括三方面內(nèi)容函數(shù)調(diào)用、方法調(diào)用以及構造函數(shù)調(diào)用,想要了解這些內(nèi)容的朋友千萬不要錯過下面的內(nèi)容。2015-11-11