獲取元素距離瀏覽器周邊的位置的方法getBoundingClientRect
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)文章
DeviceOne 讓你一見(jiàn)鐘情的App快速開(kāi)發(fā)平臺(tái)
DeviceOne是一個(gè)非常先進(jìn)的App開(kāi)發(fā)平臺(tái),使用Javascript 構(gòu)建原生體驗(yàn)的移動(dòng)應(yīng)用程序,DeviceOne主要關(guān)注外觀和體驗(yàn),以及和你的應(yīng)用程序的 UI 交互2016-02-02js鼠標(biāo)坐標(biāo)獲取常用的三個(gè)方法
這篇文章主要給大家介紹了js鼠標(biāo)坐標(biāo)獲取常用的三個(gè)方法,在 JavaScript中當(dāng)事件發(fā)生時(shí)獲取鼠標(biāo)的位置是件很重要的事件,需要的朋友可以參考下2023-09-09JS實(shí)現(xiàn)移動(dòng)端按首字母檢索城市列表附源碼下載
我們常見(jiàn)的手機(jī)通訊錄或微信通訊錄,聯(lián)系人信息是按字母順序排列的列表,通過(guò)點(diǎn)擊右側(cè)的字母,會(huì)迅速定位檢索到首字母對(duì)應(yīng)的聯(lián)系人。下面通過(guò)本文給大家分享JS實(shí)現(xiàn)移動(dòng)端按首字母檢索城市列表功能,需要的的朋友參考下吧2017-07-07js前端URL含有特殊字符的轉(zhuǎn)碼的實(shí)現(xiàn)
本文主要介紹了js前端URL含有特殊字符的轉(zhuǎn)碼的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06解決layer 動(dòng)態(tài)加載select 失效的問(wèn)題
今天小編就為大家分享一篇解決layer 動(dòng)態(tài)加載select 失效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09分享19個(gè)JavaScript 有用的簡(jiǎn)寫寫法
最近很火的一篇來(lái)自國(guó)外的文章,js的簡(jiǎn)寫寫法一定程度上可以提高你的js書寫水平對(duì)于js的理解也會(huì)更近一步2017-07-07JavaScript實(shí)現(xiàn)創(chuàng)建自定義對(duì)象的常用方式總結(jié)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)創(chuàng)建自定義對(duì)象的常用方式,結(jié)合實(shí)例形式總結(jié)分析了JavaScript工廠模式、構(gòu)造函數(shù)模式、原型模式、組合模式等常用的自定義對(duì)象創(chuàng)建模式操作與使用技巧,需要的朋友可以參考下2018-07-07JS中使用apply方法通過(guò)不同數(shù)量的參數(shù)調(diào)用函數(shù)的方法
這篇文章主要介紹了JS中使用apply方法通過(guò)不同數(shù)量的參數(shù)調(diào)用函數(shù)的方法的相關(guān)資料,需要的朋友可以參考下2016-05-05跟我學(xué)習(xí)javascript的函數(shù)調(diào)用和構(gòu)造函數(shù)調(diào)用
跟我學(xué)習(xí)javascript的函數(shù)和構(gòu)造函數(shù)調(diào)用,主要包括三方面內(nèi)容函數(shù)調(diào)用、方法調(diào)用以及構(gòu)造函數(shù)調(diào)用,想要了解這些內(nèi)容的朋友千萬(wàn)不要錯(cuò)過(guò)下面的內(nèi)容。2015-11-11