摘要:例如我想知道寫文章的這個頁面中定時發布的按鈕的尺寸和位置獲取寬度,高度的另一種方式對于內聯元素調用,返回的是邊界矩形,因為內聯元素可能跨了多行,所以可能是由多個矩形組成的。對于分為兩行的內聯元素,邊界矩形就包含了兩行的寬度。
這兩天在寫瀑布流的實現,使用了一些關于獲取文檔坐標、元素位置的函數,剛好看到犀牛書上關于這部分的介紹,特寫此文章進行總結,方便日后查找使用。
文檔坐標和視口坐標元素的位置X,Y坐標是相對于文檔的左上角或視口的左上角。向右表示X增加,向下表示Y增加,以像素來度量。
首先需要明確的是,文檔坐標不等于視口坐標。“視口”只是實際顯示文檔內容的瀏覽器的一部分,不包括瀏覽器的菜單、工具條、標簽頁等“外殼部分”。對于框架頁中顯示的文檔,視口是指定義了框架也的
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; //標準模式 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){ //使用指定窗口,如果不帶參數則使用當前窗口 w = w || window; if(w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight }; var d = w.document; //標準模式 if(document.compatMode == "CSS1Compat") return { w: d.documentElement.clientWidth, h: d.cocumentElement.clientHeight }; //怪異模式 return { w: d.body.clientWidth, h: d.body.clientHeight } }查詢元素的尺寸和位置
調用該元素的getBoundingClientRect(),返回的是一個有left,right,top,bottom屬性的對象。left,top表示左上角的X,Y,right,bottom表示右下角的X,Y坐標。
返回的是在視口坐標中的位置。返回的坐標包括元素的邊框和內邊距,不包括外邊距。
【注意】getBoundingClientRect并不是實時更新,只是調用方法時文檔視覺狀態的靜態快照,在用戶滾動或改變瀏覽器大小時不會更新它們。
//例如我想知道寫文章的這個頁面中“定時發布”的按鈕的尺寸和位置 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.對于內聯元素調用getBoundingClientRect(),返回的是“邊界矩形”,因為內聯元素可能跨了多行,所以可能是由多個矩形組成的。對于分為兩行的內聯元素,邊界矩形就包含了兩行的寬度。如果需要查詢內聯元素每個獨立的矩形,調用getClientRects()來獲取一個只讀的類對象數組。
獲取某個坐標點的元素如果想知道在視口的指定位置上有什么元素,使用document.elementFromPoint(x,y)
【注意】是視口坐標,而不是文檔坐標。返回在指定位置的一個元素
典型案例:將鼠標指針的坐標傳遞給它來判斷鼠標在哪個元素上。不過,鼠標事件對象的target屬性已經包含了這些信息。故很少使用document.elementFromPoint()
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79602.html
摘要:例如我想知道寫文章的這個頁面中定時發布的按鈕的尺寸和位置獲取寬度,高度的另一種方式對于內聯元素調用,返回的是邊界矩形,因為內聯元素可能跨了多行,所以可能是由多個矩形組成的。對于分為兩行的內聯元素,邊界矩形就包含了兩行的寬度。 這兩天在寫瀑布流的實現,使用了一些關于獲取文檔坐標、元素位置的函數,剛好看到犀牛書上關于這部分的介紹,特寫此文章進行總結,方便日后查找使用。 文檔坐標和視口坐標 ...
摘要:入門系列之位置及相對位置事件坐標寫過代碼的一般都知道,在頁面操作中,坐標概念是一個很重要的概念,幾乎所有的頁面交互都牽扯到坐標的概念。,及表示的是事件觸發點相對于事件發生所在節點左上角的位置。我們可以通過獲取到元素相對于文檔的位置信息。 js入門系列之 位置及相對位置事件坐標 寫過代碼的一般都知道,在頁面操作中,坐標概念是一個很重要的概念,幾乎所有的頁面交互都牽扯到坐標的概念。尤...
摘要:文檔和元素的幾何滾動當瀏覽器在窗口中渲染文檔時,它將會創建文檔一個視覺表現層,在哪里每個元素都有自己的位置和尺寸。通常應用程序將文檔看做元素的樹。的問題是觸發該事件的文檔元素的一個引用。 文檔和元素的幾何滾動 當瀏覽器在窗口中渲染文檔時,它將會創建文檔一個視覺表現層,在哪里每個元素都有自己的位置和尺寸。通常web應用程序將文檔看做元素的樹。 文檔坐標和窗口坐標 元素位置以像素來進行度量...
摘要:相對瀏覽器窗口簡單代碼即可實現,然而這是還不夠,因為絕大多數情況下我們希望獲取鼠標點擊位置相對于瀏覽器窗口的坐標,的,屬性分別表示鼠標點擊位置相對于文檔的左邊距,上邊距。 在一些DOM操作中我們經常會跟元素的位置打交道,鼠標交互式一個經常用到的方面,令人失望的是不同的瀏覽器下會有不同的結果甚至是有的瀏覽器下沒結果,這篇文章就上鼠標點擊位置坐標獲取做一些簡單的總結,沒特殊聲明代碼在IE8...
閱讀 1985·2021-11-22 14:45
閱讀 2593·2021-10-12 10:11
閱讀 768·2021-09-22 10:02
閱讀 1198·2019-08-30 15:55
閱讀 1142·2019-08-30 15:54
閱讀 3247·2019-08-30 15:54
閱讀 1181·2019-08-29 17:16
閱讀 3080·2019-08-28 17:55