快捷導(dǎo)航

js獲取元素相對(duì)窗口位置的實(shí)現(xiàn)代碼

更新時(shí)間：2014年09月28日 23:32:12 作者：前端開(kāi)發(fā)

這篇文章主要介紹了js獲取元素相對(duì)窗口位置的實(shí)現(xiàn)代碼,需要的朋友可以參考下

JS獲取元素的offsetTop,offsetLeft等屬性

obj.clientWidth //獲取元素的寬度

obj.clientHeight //元素的高度
obj.offsetLeft //元素相對(duì)于父元素的left
obj.offsetTop //元素相對(duì)于父元素的top
obj.offsetWidth //元素的寬度
obj.offsetHeight //元素的高度

區(qū)別：

clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = width + padding + border
offset比client多了border的寬度

//獲取元素的縱坐標(biāo)（相對(duì)于窗口）
function getTop(e){
  var offset=e.offsetTop;
  if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
  return offset;
}
//獲取元素的橫坐標(biāo)（相對(duì)于窗口）
function getLeft(e){
  var offset=e.offsetLeft;
  if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
  return offset;
}

之前也寫(xiě)過(guò)一篇JS關(guān)于獲取元素位置的文章：JS獲取元素的offsetTop,offsetLeft等屬性，我們可以通過(guò)offsetTop和offsetLeft屬性獲取元素相對(duì)窗口的位置，但offsetTop和offsetLeft屬性都是相對(duì)于父元素定位的，而通常需要獲取位置的元素都不是在最外層，所以遍歷上級(jí)元素的offset相關(guān)屬性少不了。那效率就成問(wèn)題了。

//獲取元素的縱坐標(biāo)（相對(duì)于窗口）
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//獲取元素的橫坐標(biāo)（相對(duì)于窗口）
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

好在瀏覽器給我提供了相應(yīng)的接口getBoundingClientRect，這個(gè)方法最早出現(xiàn)在IE瀏覽器中，后來(lái)的瀏覽器也跟著支持了這個(gè)方法，而且還更加完善，IE中只能獲取到元素的left,top,bottom,right的屬性，而后面的現(xiàn)代瀏覽器還能獲取到元素的width和

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
1.0	3.0 (1.9)	4.0	(Yes)	4.0

這里要注意的是，bottom是元素底部相對(duì)于窗口頂部的距離，而不是像css里面position的bottom相對(duì)于窗口底部，同理，rihgt屬性是元素最右邊相對(duì)于窗口左邊的距離。

var box = document.getElementById("box");
var pos = box.getBoundingClientRect();
box.innerHTML = "top:"+pos.top +
  "left:"+pos.left +
  "bottom:"+pos.bottom +
  "right:"+pos.right +
  "width:"+pos.width +
  "height:"+pos.height

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明：轉(zhuǎn)載自前端開(kāi)發(fā)

您可能感興趣的文章:

相關(guān)文章

前端面試的底氣之實(shí)現(xiàn)一個(gè)深拷貝
最近學(xué)到一個(gè)有關(guān)深拷貝的實(shí)現(xiàn)方法,為加深印象,這里給大家分享一下,下面這篇文章主要給大家介紹了關(guān)于前端面試的底氣之實(shí)現(xiàn)一個(gè)深拷貝的相關(guān)資料,需要的朋友可以參考下
2022-05-05
微信小程序?qū)崿F(xiàn)二維碼簽到考勤系統(tǒng)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)二維碼簽到考勤系統(tǒng)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-01-01
關(guān)于JS中的作用域中的問(wèn)題思考分享
這篇文章主要介紹了關(guān)于JS中的作用域中的問(wèn)題思考分享，scope和?closure是?javascript中兩個(gè)非常關(guān)鍵的概念，前者JS用多了還比較好理解而且容易體會(huì)到，而?closure就不一樣了。這玩意是真的很容易迷糊,需要的朋友可以參考下
2022-04-04
webpack-url-loader 解決項(xiàng)目中圖片打包路徑問(wèn)題
這篇文章主要介紹了webpack-url-loader 解決項(xiàng)目中圖片打包路徑問(wèn)題,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
JavaScript使用readAsDataURL讀取圖像文件
這篇文章主要為大家詳細(xì)介紹了JavaScript使用readAsDataURL讀取圖像文件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
一文搞懂V8引擎的垃圾回收機(jī)制
我們平時(shí)在寫(xiě)代碼的過(guò)程中，好像很少需要自己手動(dòng)進(jìn)行垃圾回收，那么V8是如何來(lái)減少內(nèi)存占用，從而避免內(nèi)存溢出而導(dǎo)致程序崩潰的情況的，為了更高效地回收垃圾，V8引入了兩個(gè)垃圾回收器，它們分別針對(duì)不同場(chǎng)景進(jìn)行工作
2023-06-06
深入理解JS中attribute和property的區(qū)別
property 和 attribute非常容易混淆，但實(shí)際上，二者是不同的東西，屬于不同的范疇，本文就詳細(xì)的介紹一下JS中attribute和property的區(qū)別，感興趣的可以了解一下
2022-02-02
JavaScript中的this關(guān)鍵字用法詳解
在編寫(xiě)JavaScript應(yīng)用的時(shí)候，我們經(jīng)常會(huì)使用this關(guān)鍵字。那么this關(guān)鍵字究竟是怎樣工作的，它的設(shè)計(jì)有哪些好的地方，有哪些不好的地方，本文帶大家全面系統(tǒng)地認(rèn)識(shí)這個(gè)老朋友，感興趣的小伙伴可以借鑒閱讀
2023-05-05
js模擬類繼承小例子
使用js模擬類繼承小例子，學(xué)習(xí)js面向?qū)ο蟮呐笥芽梢詤⒖枷隆?/div> 2010-07-07
javascript 流暢動(dòng)畫(huà)實(shí)現(xiàn)原理
瀏覽器目前來(lái)說(shuō)是沒(méi)有抗鋸齒效果的(將來(lái)不一定哦)，這樣dom元素外觀的改變就被限制在1個(gè)像素為最佳效果。
2009-09-09