摘要:例如我想知道寫文章的這個(gè)頁面中定時(shí)發(fā)布的按鈕的尺寸和位置獲取寬度,高度的另一種方式對于內(nèi)聯(lián)元素調(diào)用,返回的是邊界矩形,因?yàn)閮?nèi)聯(lián)元素可能跨了多行,所以可能是由多個(gè)矩形組成的。對于分為兩行的內(nèi)聯(lián)元素,邊界矩形就包含了兩行的寬度。
這兩天在寫瀑布流的實(shí)現(xiàn),使用了一些關(guān)于獲取文檔坐標(biāo)、元素位置的函數(shù),剛好看到犀牛書上關(guān)于這部分的介紹,特寫此文章進(jìn)行總結(jié),方便日后查找使用。
文檔坐標(biāo)和視口坐標(biāo)元素的位置X,Y坐標(biāo)是相對于文檔的左上角或視口的左上角。向右表示X增加,向下表示Y增加,以像素來度量。
首先需要明確的是,文檔坐標(biāo)不等于視口坐標(biāo)。“視口”只是實(shí)際顯示文檔內(nèi)容的瀏覽器的一部分,不包括瀏覽器的菜單、工具條、標(biāo)簽頁等“外殼部分”。對于框架頁中顯示的文檔,視口是指定義了框架也的
window.pageXOffset,window.pageYOffset
scrollLeft, scrollTop
正常情況,可以通過document.documentElement來獲取
怪異模式,必須使用document.body來獲取
function getScrollOffset(w){ w = w || window; if(w.pageXOffset != null) return { x: w.pageXOffset, y: w.pageYOffset }; var d = document; //標(biāo)準(zhǔn)模式 if(document.compatMode == "CSS1Compat") return { x: d.documentElement.scrollLeft, y:d.documentElement.scrollTop }; //怪異模式 return { x: d.body.scrollLeft, y: d.body.scrollTop }; }視口尺寸
function getViewportSize(w){ //使用指定窗口,如果不帶參數(shù)則使用當(dāng)前窗口 w = w || window; if(w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight }; var d = w.document; //標(biāo)準(zhǔn)模式 if(document.compatMode == "CSS1Compat") return { w: d.documentElement.clientWidth, h: d.cocumentElement.clientHeight }; //怪異模式 return { w: d.body.clientWidth, h: d.body.clientHeight } }查詢元素的尺寸和位置
調(diào)用該元素的getBoundingClientRect(),返回的是一個(gè)有l(wèi)eft,right,top,bottom屬性的對象。left,top表示左上角的X,Y,right,bottom表示右下角的X,Y坐標(biāo)。
返回的是在視口坐標(biāo)中的位置。返回的坐標(biāo)包括元素的邊框和內(nèi)邊距,不包括外邊距。
【注意】getBoundingClientRect并不是實(shí)時(shí)更新,只是調(diào)用方法時(shí)文檔視覺狀態(tài)的靜態(tài)快照,在用戶滾動或改變?yōu)g覽器大小時(shí)不會更新它們。
//例如我想知道寫文章的這個(gè)頁面中“定時(shí)發(fā)布”的按鈕的尺寸和位置 var box = document.getElementById("setPublishTime").getBoundingClientRect(); //ClientRect {top: 425, right: 1223, bottom: 460, left: 1141, width: 82, height : 35} //獲取寬度,高度的另一種方式 var w = box.width || (box.right - box.left); var h = box.height || (box.bottom - box.top);
ps.對于內(nèi)聯(lián)元素調(diào)用getBoundingClientRect(),返回的是“邊界矩形”,因?yàn)閮?nèi)聯(lián)元素可能跨了多行,所以可能是由多個(gè)矩形組成的。對于分為兩行的內(nèi)聯(lián)元素,邊界矩形就包含了兩行的寬度。如果需要查詢內(nèi)聯(lián)元素每個(gè)獨(dú)立的矩形,調(diào)用getClientRects()來獲取一個(gè)只讀的類對象數(shù)組。
獲取某個(gè)坐標(biāo)點(diǎn)的元素如果想知道在視口的指定位置上有什么元素,使用document.elementFromPoint(x,y)
【注意】是視口坐標(biāo),而不是文檔坐標(biāo)。返回在指定位置的一個(gè)元素
典型案例:將鼠標(biāo)指針的坐標(biāo)傳遞給它來判斷鼠標(biāo)在哪個(gè)元素上。不過,鼠標(biāo)事件對象的target屬性已經(jīng)包含了這些信息。故很少使用document.elementFromPoint()
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/54360.html
摘要:例如我想知道寫文章的這個(gè)頁面中定時(shí)發(fā)布的按鈕的尺寸和位置獲取寬度,高度的另一種方式對于內(nèi)聯(lián)元素調(diào)用,返回的是邊界矩形,因?yàn)閮?nèi)聯(lián)元素可能跨了多行,所以可能是由多個(gè)矩形組成的。對于分為兩行的內(nèi)聯(lián)元素,邊界矩形就包含了兩行的寬度。 這兩天在寫瀑布流的實(shí)現(xiàn),使用了一些關(guān)于獲取文檔坐標(biāo)、元素位置的函數(shù),剛好看到犀牛書上關(guān)于這部分的介紹,特寫此文章進(jìn)行總結(jié),方便日后查找使用。 文檔坐標(biāo)和視口坐標(biāo) ...
摘要:入門系列之位置及相對位置事件坐標(biāo)寫過代碼的一般都知道,在頁面操作中,坐標(biāo)概念是一個(gè)很重要的概念,幾乎所有的頁面交互都牽扯到坐標(biāo)的概念。,及表示的是事件觸發(fā)點(diǎn)相對于事件發(fā)生所在節(jié)點(diǎn)左上角的位置。我們可以通過獲取到元素相對于文檔的位置信息。 js入門系列之 位置及相對位置事件坐標(biāo) 寫過代碼的一般都知道,在頁面操作中,坐標(biāo)概念是一個(gè)很重要的概念,幾乎所有的頁面交互都牽扯到坐標(biāo)的概念。尤...
摘要:文檔和元素的幾何滾動當(dāng)瀏覽器在窗口中渲染文檔時(shí),它將會創(chuàng)建文檔一個(gè)視覺表現(xiàn)層,在哪里每個(gè)元素都有自己的位置和尺寸。通常應(yīng)用程序?qū)⑽臋n看做元素的樹。的問題是觸發(fā)該事件的文檔元素的一個(gè)引用。 文檔和元素的幾何滾動 當(dāng)瀏覽器在窗口中渲染文檔時(shí),它將會創(chuàng)建文檔一個(gè)視覺表現(xiàn)層,在哪里每個(gè)元素都有自己的位置和尺寸。通常web應(yīng)用程序?qū)⑽臋n看做元素的樹。 文檔坐標(biāo)和窗口坐標(biāo) 元素位置以像素來進(jìn)行度量...
摘要:相對瀏覽器窗口簡單代碼即可實(shí)現(xiàn),然而這是還不夠,因?yàn)榻^大多數(shù)情況下我們希望獲取鼠標(biāo)點(diǎn)擊位置相對于瀏覽器窗口的坐標(biāo),的,屬性分別表示鼠標(biāo)點(diǎn)擊位置相對于文檔的左邊距,上邊距。 在一些DOM操作中我們經(jīng)常會跟元素的位置打交道,鼠標(biāo)交互式一個(gè)經(jīng)常用到的方面,令人失望的是不同的瀏覽器下會有不同的結(jié)果甚至是有的瀏覽器下沒結(jié)果,這篇文章就上鼠標(biāo)點(diǎn)擊位置坐標(biāo)獲取做一些簡單的總結(jié),沒特殊聲明代碼在IE8...
閱讀 1198·2021-11-10 11:35
閱讀 2925·2021-09-24 10:35
閱讀 2957·2021-09-22 15:38
閱讀 2807·2019-08-30 15:43
閱讀 1338·2019-08-29 18:39
閱讀 2558·2019-08-29 15:22
閱讀 2789·2019-08-28 18:17
閱讀 612·2019-08-26 13:37