js 獲取當前元素距離視窗的距離

2021-10-02 04:58:53 字數 995 閱讀 7238

獲取dom到body左側和頂部的距離-getboundingclientrect

平時在寫js的時候,偶爾會需要用js來獲取當前div到 body 左側、頂部的距離。網上查一查,有很多都是通過offsettop、offsetleft來計算出來的。我按照網上的查到的資料用了一次,算出來了一堆錯誤答案。下面我要分享的這個方法,相容性很好(ie4都ok),而且很方便,不會算錯。

這個方法就是 getboundingclientrect。

1.getboundingclientrect方法簡介

getboundingclientrect 返回的是乙個 domrect 物件,是一組矩形集合,我們這次所使用的返回值主要是left、top、bottom和right。其餘的返回值width、height、x、y這次用不到,就不再討論。

使用方法如下:

let domtotop = dom.getboundingclientrect().top  // dom 的頂邊到視口頂部的距離

let domtoleft = dom.getboundingclientrect().left // dom 的左邊到視口左邊的距離

let domtobottom = dom.getboundingclientrect().bottom // dom 的底邊到視口頂部的距離

let domtoright = dom.getboundingclientrect().right // dom 的右邊到視口左邊的距離

得到的值是相對於視口而言的,即如果頁面的滾動位置發生變化,那麼得到的top、left也會發生變化;如果需要計算到body邊框的距離,需要再加上網頁滾動條的長度。下面會給出完整例子。

這個方法返回的四個值都是相對於當前視口的左上角而言的。即top和bottom是dom的頂邊和底邊到視口的頂部的距離,同理left和right是相對於視口左邊的距離。

scrolltop 和 offsettop 是距離父元素的。

js 滑鼠 元素的距離屬性

offsettop 返回元素的上外緣距離最近採用定位父元素內壁的距離,如果父元素中沒有採用定位的,則是獲取上外邊緣距離文件內壁的距離。所謂的定位就是position屬性值為relative absolute或者fixed。返回值是乙個整數,單位是畫素。此屬性是唯讀的。offsetleft 此屬性和o...

js獲取距離螢幕的座標

首先計算js距離瀏覽器視窗的座標 let x test offset left window.screenleft let y test offset top 再計算瀏覽器距離螢幕的寬和高,通過window.screenleft和window.screentop獲取瀏覽器距離螢幕的偏移量 兩者相加就...

通過日期計算距離當前時間的距離

格式1 通過 2014 12 11 22 22 22 獲得 今天22 22 昨天22 22 2天前 1個月前 3年前 nsstring datestr 2015 01 15 22 22 22 nsdateformatter dateformat nsdateformatter alloc init ...