本篇內(nèi)容主要講解“如何用JavaScript獲取頁面元素的位置”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何用JavaScript獲取頁面元素的位置”吧!

創(chuàng)新互聯(lián)建站主要從事網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)涉縣,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

1.網(wǎng)頁的大小和瀏覽器窗口的大小

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

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

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

很顯然，如果網(wǎng)頁的內(nèi)容能夠在瀏覽器窗口中全部顯示(也就是不出現(xiàn)滾動條)，那么網(wǎng)頁的大小和瀏覽器窗口的大小是相等的。如果不能全部顯示，則滾動瀏覽器窗口，可以顯示出網(wǎng)頁的各個(gè)部分。

2.獲取網(wǎng)頁的大小

網(wǎng)頁上的每個(gè)元素，都有clientHeight和clientWidth屬性。這兩個(gè)屬性指元素的內(nèi)容部分再加上padding的所占據(jù)的視覺面積，不包括border和滾動條占用的空間。

因此，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對象還沒生成，瀏覽器會報(bào)錯。

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

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

3.獲取網(wǎng)頁大小的另一種方法

網(wǎng)頁上的每個(gè)元素還有scrollHeight和scrollWidth屬性，指包含滾動條在內(nèi)的該元素的視覺面積。

那么，document對象的scrollHeight和scrollWidth屬性就是網(wǎ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)滾動條，那么網(wǎ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)
　　　　　　}
　　　　}
　　}

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

網(wǎng)頁元素的絕對位置，指該元素的左上角相對于整張網(wǎng)頁左上角的坐標(biāo)。這個(gè)絕對位置要通過計(jì)算才能得到。

首先，每個(gè)元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器(offsetParent對象)左上角的距離。所以，只需要將這兩個(gè)值進(jìn)行累加，就可以得到該元素的絕對坐標(biāo)。

下面兩個(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中的元素不適用。

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

網(wǎng)頁元素的相對位置，指該元素左上角相對于瀏覽器窗口左上角的坐標(biāo)。

有了絕對位置以后，獲得相對位置就很容易了，只要將絕對坐標(biāo)減去頁面的滾動條滾動的距離就可以了。滾動條滾動的垂直距離，是document對象的scrollTop屬性;滾動條滾動的水平距離是document對象的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屬性是可以賦值的，并且會立即自動滾動網(wǎng)頁到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁元素的相對位置。另外，element.scrollIntoView()方法也有類似作用，可以使網(wǎng)頁元素出現(xiàn)在瀏覽器窗口的左上角。

6.獲取元素位置的快速方法

除了上面的函數(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;

再加上滾動距離，就可以得到絕對位置

   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不支持。

到此，相信大家對“如何用JavaScript獲取頁面元素的位置”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)頁題目：如何用JavaScript獲取頁面元素的位置
鏈接分享：http://www.chinadenli.net/article16/pgdidg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、營銷型網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站維護(hù)、網(wǎng)站策劃、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)