制作網(wǎng)頁的過程中，你有時(shí)候需要知道某個(gè)元素在網(wǎng)頁上的確切位置。

下面的教程總結(jié)了Javascript在網(wǎng)頁定位方面的相關(guān)知識。

一、網(wǎng)頁的絕對大小和相對大小

首先，要明確兩個(gè)基本概念。

一張網(wǎng)頁的全部面積，就是它的絕對大小。通常情況下，網(wǎng)頁的絕對大小由內(nèi)容和CSS樣式表決定。

網(wǎng)頁的相對大小則是指在瀏覽器窗口中看到的那部分網(wǎng)頁，也就是瀏覽器窗口的大小，又叫做viewport（視口）。

下圖中央的方框就代表瀏覽器窗口，每次只能顯示一部分網(wǎng)頁。

（圖一 網(wǎng)頁的絕對大小和相對大小）

很顯然，如果網(wǎng)頁的內(nèi)容能夠在瀏覽器窗口中全部顯示（也就是不出現(xiàn)滾動(dòng)條），那么網(wǎng)頁的絕對大小和相對大小是相等的。

二、獲取網(wǎng)頁的相對大小

網(wǎng)頁上的每個(gè)元素，都有clientHeight和clientWidth屬性，利用它們就可以得到網(wǎng)頁的相對大小。這兩個(gè)屬性代表的大小，是指元素的內(nèi)容部分再加上padding的大小，但是不包括border和滾動(dòng)條占用的空間。

?

?

?

（圖二 clientHeight和clientWidth屬性）

因此，document元素的clientHeight和clientWidth屬性，就代表了網(wǎng)頁的相對大小。

　　function getViewport(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

上面的getViewport函數(shù)就可以返回瀏覽器窗口的高和寬。使用的時(shí)候，有三個(gè)地方需要注意：

1）這個(gè)函數(shù)必須在頁面加載完成后才能運(yùn)行，否則document對象還沒生成，瀏覽器會(huì)報(bào)錯(cuò)。

2）大多數(shù)情況下，都是document.documentElement.clientWidth返回正確值。但是，在IE6的quirks模式中，document.body.clientWidth返回正確的值，因此函數(shù)中加入了對文檔模式的判斷。

3）clientWidth和clientHeight都是只讀屬性，不能對它們賦值。

三、獲取網(wǎng)頁的絕對大小

document對象的scrollHeight和scrollWidth屬性就是網(wǎng)頁的絕對大小，意思就是滾動(dòng)條滾過的所有長度和寬度。

仿照getViewport()函數(shù)，可以寫出getPagearea()函數(shù)。

　　function getPagearea(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.scrollWidth,
　　　　　　　　height: document.body.scrollHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.scrollWidth,
　　　　　　　　height: document.documentElement.scrollHeight
　　　　　　}
　　　　}
　　}

但是，這個(gè)函數(shù)有一個(gè)問題。前面說過，如果網(wǎng)頁內(nèi)容能夠在瀏覽器窗口中全部顯示，不出現(xiàn)滾動(dòng)條，那么網(wǎng)頁的絕對大小與相對大小應(yīng)該相等，即clientWidth和scrollWidth應(yīng)該相等。但是實(shí)際上，不同瀏覽器有不同的處理，這兩個(gè)值未必相等。所以，我們需要取它們之中較大的那個(gè)值，因此要對getPagearea()函數(shù)進(jìn)行改寫。

　　function getPagearea(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: Math.max(document.body.scrollWidth,
　　　　　　　　　　　　　　　　document.body.clientWidth),
　　　　　　　　height: Math.max(document.body.scrollHeight,
　　　　　　　　　　　　　　　　document.body.clientHeight)
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: Math.max(document.documentElement.scrollWidth,
　　　　　　　　　　　　　　　　document.documentElement.clientWidth),
　　　　　　　　height: Math.max(document.documentElement.scrollHeight,
　　　　　　　　　　　　　　　　document.documentElement.clientHeight)
　　　　　　}
　　　　}
　　}

四、獲取網(wǎng)頁元素的絕對位置

由于網(wǎng)頁大小有絕對和相對之分，所以網(wǎng)頁元素的位置也有絕對和相對之分。網(wǎng)頁元素的左上角相對于整張網(wǎng)頁左上角的坐標(biāo)，就是絕對位置；相對于瀏覽器窗口左上角的坐標(biāo)，就是相對位置。

Javascript語言中，網(wǎng)頁元素的絕對坐標(biāo)要通過計(jì)算才能得到。每個(gè)元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對象）左上角的距離。所以，只需要將這兩個(gè)值進(jìn)行累加，就可以得到該元素的絕對坐標(biāo)。

?

（圖三 offsetTop和offsetLeft屬性）

下面兩個(gè)函數(shù)可以用來獲取絕對位置的橫坐標(biāo)和縱坐標(biāo)。

　　function getElementLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}

　　　　return actualLeft;
　　}

　　function getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualTop += current.offsetTop;
　　　　　　current = current.offsetParent;
　　　　}

　　　　return actualTop;
　　}

由于在表格和iframe中，offsetParent對象未必等于父容器，所以上面的函數(shù)對于表格和iframe中的元素不適用。

五、獲取網(wǎng)頁元素的相對位置

有了某個(gè)元素的絕對位置以后，獲得相對位置就很容易了，只要將絕對坐標(biāo)減去滾動(dòng)條滾動(dòng)的距離就可以了。滾動(dòng)條滾動(dòng)的垂直距離，是document對象的scrollTop屬性；滾動(dòng)條滾動(dòng)的水平距離是document對象的scrollLeft屬性。

?

（圖四 scrollTop和scrollLeft屬性）

對上一節(jié)中的兩個(gè)函數(shù)進(jìn)行相應(yīng)的改寫：

　　function getElementViewLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}

　　　　if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollLeft=document.body.scrollLeft;
　　　　} else {
　　　　　　var elementScrollLeft=document.documentElement.scrollLeft;
　　　　}

　　　　return actualLeft-elementScrollLeft;
　　}

　　function getElementViewTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualTop += current. offsetTop;
　　　　　　current = current.offsetParent;
　　　　}

　　　　 if (document.compatMode == "BackCompat"){
　　　　　　var elementScrollTop=document.body.scrollTop;
　　　　} else {
　　　　　　var elementScrollTop=document.documentElement.scrollTop;
　　　　}

　　　　return actualTop-elementScrollTop;
　　}

scrollTop和scrollLeft屬性是可以賦值的，并且會(huì)立即自動(dòng)滾動(dòng)網(wǎng)頁到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁元素的相對位置。另外，element.scrollIntoView()方法也有類似作用，可以使網(wǎng)頁元素出現(xiàn)在瀏覽器窗口的左上角。

六、獲取元素位置的快速方法

除了上面的函數(shù)以外，還有一種快速方法，可以立刻獲得網(wǎng)頁元素的位置。

那就是使用getBoundingClientRect()方法。它返回一個(gè)對象，其中包含了left、right、top、bottom四個(gè)屬性，分別對應(yīng)了該元素的左上角和右下角相對于瀏覽器窗口（viewport）左上角的距離。

所以，網(wǎng)頁元素的相對位置就是

　　var X= this.getBoundingClientRect().left;

　　var Y =this.getBoundingClientRect().top;

再加上滾動(dòng)距離，就可以得到絕對位置

　　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

　　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

目前，IE、Firefox 3.0+、Opera 9.5+都支持該方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。

?

?上面引用來源于：? ?http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html? 非常經(jīng)典之作！?

?

---------------------------------------------------------------------------------------------------------------------------------

引用 http://www.bgscript.com/archives/123 getBoundingClientRect有何用

我們常常要計(jì)算一個(gè)元素相對屏幕客戶區(qū)域位置,最常見的就是自定義的小提示,鼠標(biāo)放到某個(gè)元素上,就在元素上方或下方顯示提示.

一般的計(jì)算方法是累加元素offsetParent的offsetLeft和offsetTop一直到DOM的頂層,如果計(jì)算的元素是一個(gè)DIV,又沒滾動(dòng),沒邊框等這些限制的話,

這方法大多數(shù)情況下可以返回想要的結(jié)果,為什么說是大多數(shù)情況呢,因?yàn)闉g覽器間的差異和元素的盒模型的不同使得計(jì)算這個(gè)相對屏幕客戶區(qū)域位置是非常的麻煩,不得不用一堆怪異的代碼和計(jì)算去處理怪異的模式,元素間稍有不同計(jì)算就有偏差,如在計(jì)算該值時(shí)以下可能出現(xiàn)的BUG就必須得考慮:

計(jì)算 table的 offsets.
計(jì)算 絕對定位的元素(position:absolute).
在其它容器內(nèi)出現(xiàn)的Scroll offsets(scrollLeft,scrollTop).
所有父元素溢出的邊框(overflow:visible).
誤算絕對定位的父元素.
如果用JS去實(shí)現(xiàn)這方法是一件相當(dāng)不簡單的事,想要正確計(jì)算,就得對不同瀏覽器對元素的定位方式之間的差異有充分的了解,這是一個(gè)大工程,相信要開一個(gè)討論會(huì)討論個(gè)牛年馬月,再實(shí)踐個(gè)十年八年才可正確的實(shí)現(xiàn)這么個(gè)方法,但如果瀏覽器本身就支持這么個(gè)方法那就是至妙的了,因?yàn)槭菫g覽器本身支持的,它自己最清楚自己干了些什么,而且計(jì)算時(shí)用的是native code,速度超快,比用JS的性能提高不少,而我們要做的就是檢查一下,再調(diào)用一下,非常方便!

實(shí)現(xiàn)跨瀏覽器,可行的getBoundingClientRect

雖然非常方便,但也不是拿來就可以用,即便是同一方法,在IE中還有怪異模式與標(biāo)準(zhǔn)模式間的差異,傳說中是在ie中html元素是有border的，默認(rèn)是２px,但這在怪異模式下是沒有，也就是０.
這樣就造成在調(diào)用方法后一個(gè)實(shí)際上是left:0,top:0的元素返回的確是left:2,top:2px.這樣的誤差是不能接受的.至于IE為什么這么做,為什么會(huì)多出2px.背光且不討論這些公說公有理,婆說婆有理,不備具一般邏輯完備性的東西,還是留多點(diǎn)精力實(shí)現(xiàn)我們的WEB應(yīng)用,找個(gè)完美的兼容方法才是正道.

?

http://www.bgscript.com/archives/123?這篇文章前半段分析非常贊同，但最后給出的解決方案實(shí)在不可用！

?

?

?

?

?

?

YUI的DOM代碼更精確，待整理......

?

通過 Wiz 發(fā)布

轉(zhuǎn)載于:https://www.cnblogs.com/jianfangkk/archive/2011/12/30/2307172.html

總結(jié)

以上是生活随笔為你收集整理的javascript js jquery获取元素位置代码总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。