本篇內(nèi)容主要講解“如何用JavaScript獲取頁(yè)面元素的位置”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何用JavaScript獲取頁(yè)面元素的位置”吧!
創(chuàng)新互聯(lián)建站主要從事網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)涉縣,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):13518219792
首先,要明確兩個(gè)基本概念。
一張網(wǎng)頁(yè)的全部面積,就是它的大小。通常情況下,網(wǎng)頁(yè)的大小由內(nèi)容和CSS樣式表決定。
瀏覽器窗口的大小,則是指在瀏覽器窗口中看到的那部分網(wǎng)頁(yè)面積,又叫做viewport(視口)。
很顯然,如果網(wǎng)頁(yè)的內(nèi)容能夠在瀏覽器窗口中全部顯示(也就是不出現(xiàn)滾動(dòng)條),那么網(wǎng)頁(yè)的大小和瀏覽器窗口的大小是相等的。如果不能全部顯示,則滾動(dòng)瀏覽器窗口,可以顯示出網(wǎng)頁(yè)的各個(gè)部分。
網(wǎng)頁(yè)上的每個(gè)元素,都有clientHeight和clientWidth屬性。這兩個(gè)屬性指元素的內(nèi)容部分再加上padding的所占據(jù)的視覺(jué)面積,不包括border和滾動(dòng)條占用的空間。
因此,document元素的clientHeight和clientWidth屬性,就代表了網(wǎng)頁(yè)的大小。
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è)面加載完成后才能運(yùn)行,否則document對(duì)象還沒(méi)生成,瀏覽器會(huì)報(bào)錯(cuò)。
(2)大多數(shù)情況下,都是document.documentElement.clientWidth返回正確值。但是,在IE6的quirks模式中,document.body.clientWidth返回正確的值,因此函數(shù)中加入了對(duì)文檔模式的判斷。
(3)clientWidth和clientHeight都是只讀屬性,不能對(duì)它們賦值。
網(wǎng)頁(yè)上的每個(gè)元素還有scrollHeight和scrollWidth屬性,指包含滾動(dòng)條在內(nèi)的該元素的視覺(jué)面積。
那么,document對(duì)象的scrollHeight和scrollWidth屬性就是網(wǎng)頁(yè)的大小,意思就是滾動(dòng)條滾過(guò)的所有長(zhǎng)度和寬度。
仿照getViewport()函數(shù),可以寫(xiě)出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èn)題。如果網(wǎng)頁(yè)內(nèi)容能夠在瀏覽器窗口中全部顯示,不出現(xiàn)滾動(dòng)條,那么網(wǎng)頁(yè)的clientWidth和scrollWidth應(yīng)該相等。但是實(shí)際上,不同瀏覽器有不同的處理,這兩個(gè)值未必相等。所以,我們需要取它們之中較大的那個(gè)值,因此要對(duì)getPagearea()函數(shù)進(jìn)行改寫(xiě)。
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)頁(yè)元素的絕對(duì)位置,指該元素的左上角相對(duì)于整張網(wǎng)頁(yè)左上角的坐標(biāo)。這個(gè)絕對(duì)位置要通過(guò)計(jì)算才能得到。
首先,每個(gè)元素都有offsetTop和offsetLeft屬性,表示該元素的左上角與父容器(offsetParent對(duì)象)左上角的距離。所以,只需要將這兩個(gè)值進(jìn)行累加,就可以得到該元素的絕對(duì)坐標(biāo)。
下面兩個(gè)函數(shù)可以用來(lái)獲取絕對(duì)位置的橫坐標(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對(duì)象未必等于父容器,所以上面的函數(shù)對(duì)于表格和iframe中的元素不適用。
網(wǎng)頁(yè)元素的相對(duì)位置,指該元素左上角相對(duì)于瀏覽器窗口左上角的坐標(biāo)。
有了絕對(duì)位置以后,獲得相對(duì)位置就很容易了,只要將絕對(duì)坐標(biāo)減去頁(yè)面的滾動(dòng)條滾動(dòng)的距離就可以了。滾動(dòng)條滾動(dòng)的垂直距離,是document對(duì)象的scrollTop屬性;滾動(dòng)條滾動(dòng)的水平距離是document對(duì)象的scrollLeft屬性。
對(duì)上一節(jié)中的兩個(gè)函數(shù)進(jìn)行相應(yīng)的改寫(xiě):
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è)到相應(yīng)位置,因此可以利用它們改變網(wǎng)頁(yè)元素的相對(duì)位置。另外,element.scrollIntoView()方法也有類似作用,可以使網(wǎng)頁(yè)元素出現(xiàn)在瀏覽器窗口的左上角。
除了上面的函數(shù)以外,還有一種快速方法,可以立刻獲得網(wǎng)頁(yè)元素的位置。
那就是使用getBoundingClientRect()方法。它返回一個(gè)對(duì)象,其中包含了left、right、top、bottom四個(gè)屬性,分別對(duì)應(yīng)了該元素的左上角和右下角相對(duì)于瀏覽器窗口(viewport)左上角的距離。
所以,網(wǎng)頁(yè)元素的相對(duì)位置就是
var X= this.getBoundingClientRect().left; var Y =this.getBoundingClientRect().top;
再加上滾動(dòng)距離,就可以得到絕對(duì)位置
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不支持。
到此,相信大家對(duì)“如何用JavaScript獲取頁(yè)面元素的位置”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
標(biāo)題名稱:如何用JavaScript獲取頁(yè)面元素的位置
網(wǎng)站URL:http://www.muchs.cn/article16/pgdidg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供靜態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、App設(shè)計(jì)、、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)