首頁 web前端 js教程 js取得元素相對視窗位置的實作程式碼_javascript技巧

js取得元素相對視窗位置的實作程式碼_javascript技巧

May 16, 2016 pm 04:35 PM
位置 元素

JS取得元素的offsetTop,offsetLeft等屬性

obj.clientWidth //取得元素的寬度

obj.clientHeight //元素的高度
obj.offsetLeft //元素相對於父元素的left
obj.offsetTop //元素相對於父元素的top
obj.offsetWidth //元素的寬度
obj.offsetHeight //元素的高度

區別:

clientWidth = width padding
clientHeight = height padding
offsetWidth = width padding border
offsetHeight = width padding border
offset比client多了border的寬度

//获取元素的纵坐标(相对于窗口)
function getTop(e){
  var offset=e.offsetTop;
  if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
  return offset;
}
//获取元素的横坐标(相对于窗口)
function getLeft(e){
  var offset=e.offsetLeft;
  if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
  return offset;
}
登入後複製

之前也寫過一篇JS關於取得元素位置的文章:JS取得元素的offsetTop,offsetLeft等屬性,我們可以透過offsetTop和offsetLeft屬性取得元素相對視窗的位置,但offsetTop和offsetLeft屬性都是相對於父元素定位的,而通常需要取得位置的元素都不是在最外層,所以遍歷上級元素的offset相關屬性少不了。那效率就成問題了。

//获取元素的纵坐标(相对于窗口)
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标(相对于窗口)
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
登入後複製

好在瀏覽器給我提供了相應的接口getBoundingClientRect,這個方法最早出現在IE瀏覽器中,後來的瀏覽器也跟著支持了這個方法,而且還更加完善,IE中只能獲取到元素的left,top,bottom,right的屬性,而後面的現代瀏覽器還能取得到元素的width和

Chrome Firefox (Gecko) Internet Explorer Opera Safari
1.0 3.0 (1.9) 4.0 (Yes) 4.0

這裡要注意的是,bottom是元素底部相對於視窗頂部的距離,而不是像css裡面position的bottom相對於視窗底部,同理,rihgt屬性是元素最右邊相對於視窗左邊的距離。

var box = document.getElementById("box");
var pos = box.getBoundingClientRect();
box.innerHTML = "top:"+pos.top +
  "left:"+pos.left +
  "bottom:"+pos.bottom +
  "right:"+pos.right +
  "width:"+pos.width +
  "height:"+pos.height
登入後複製

原創文章,轉載請註明: 轉載自前端開發

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

詳細介紹如何在Windows 11上開啟環境變數設定 詳細介紹如何在Windows 11上開啟環境變數設定 Dec 30, 2023 pm 06:07 PM

環境變數功能是系統中的配置程式運行必備工具,但是在最新的win11系統中還有許多的用戶不知道怎麼設置打開,下面就給你們帶來了win11環境變量打開位置詳細介紹,快來一起學習操作一下吧。 win11環境變數在哪:1、先輸入“win+R”,開啟運行框。 2、然後在裡面輸入指令:controlsystem。 3.在開啟的系統資訊介面中,選擇左側選單的「進階系統設定」。 4.隨後在開啟的「系統屬性」視窗選擇下方的「環境變數」選項。 5.最後在開啟的環境變數中,即可依照需求進行相關的設定。

Win11的啟動路徑以及如何開啟它 Win11的啟動路徑以及如何開啟它 Jan 03, 2024 pm 11:13 PM

每個Windows系統都有一個啟動路徑,如果你在其中新增了檔案或軟體,就會在開機的時候打開它。不過不少朋友不知道win11啟動路徑在哪裡,其實我們只要進入C碟的對應資料夾就可以了。 win11啟動路徑:1、雙擊開啟「此電腦」2、直接將此路徑「C:\ProgramData\Microsoft\Windows\StartMenu\Programs\Startup」貼進路徑方塊。 3.這裡就是win11啟動路徑了,如果我們要開機開啟檔案就可以將檔案放進來。 4.如果你根據這條路徑進不來,可能是被隱藏了。

星穹鐵道克勞克影視樂園摺紙小鳥位置 星穹鐵道克勞克影視樂園摺紙小鳥位置 Mar 27, 2024 pm 11:51 PM

星穹鐵道克勞克影視樂園總共有20隻摺紙小鳥,有很多玩家不知道克勞克影視樂園摺紙小鳥在哪,小編已經把每隻摺紙小鳥位置全部都總結出來了,幫助大家進行尋找,具體內容一起來看看這篇克勞克影視樂園摺紙小鳥位置最新匯總。崩壞星穹鐵道攻略大全星穹鐵道克勞克影視樂園摺紙小鳥位置1、克勞克影視樂園一層2、克勞克影視樂園二層

了解pip安裝包儲存的位置和結構 了解pip安裝包儲存的位置和結構 Jan 18, 2024 am 08:23 AM

深入了解pip安裝的套件存放位置,需要具體程式碼範例pip是Python語言常用的套件管理工具,用於方便安裝、升級和管理Python套件。在使用pip安裝套件時,它會自動從PyPI(Python套件索引)下載對應的套件文件,並將其安裝到指定的位置。那麼,pip安裝的套件究竟存放在哪裡呢?這是很多Python開發者都會遇到的問題。本文將深入探討pip安裝的套件存放位置,並提供

win11關機位置 win11關機位置 Jan 10, 2024 am 09:14 AM

如果我們要長時間離開電腦,那麼最好將電腦關機保護它,那麼win11關機在哪裡呢,其實一般來說只要打開開始選單,在其中就可以找到關機按鈕了。 win11關機在哪裡:答:在開始功能表的電源按鈕。 1.首先我們點選底部工作列的「windows標誌」開啟「開始功能表」2、開啟後,可以在右下角找到「電源」按鈕,如圖所示。 3.點擊電源按鈕後,就能看到「關機」了,點擊它就能關機。 4.如果因為當機等特殊狀況無法關機,那麼可以直接用電腦上的「電源鍵」長按強制關機。

最後紀元競技場在哪 最後紀元競技場在哪 Mar 07, 2024 pm 08:16 PM

在《最後紀元》中,玩家可以玩多種形式,如遊戲模式、挑戰模式和競技場等。競技場則是遊戲的終極玩法,提供兩種模式供玩家選擇。最後紀元競技場在哪裡答:競技場屬於終局玩法,具體位置在冠軍之門。需要取得競技場鑰匙或記憶的競技場鑰匙,右鍵後可見世界地圖,並能找到冠軍之門的具體位置。競技場分為兩大模式:競技場冠軍模式和無盡競技場模式。前者包括40波敵人與選擇的獎勵,總要在與競技場冠軍的較量中達到頂峰。競技場冠軍模式共有4階段,難度越高,獎勵越好。無盡競技場是無限波次的模式,難度逐漸增加,成績最好的挑戰者將

快手發佈於哪裡怎麼改位置?已經上傳的影片怎麼加入位置? 快手發佈於哪裡怎麼改位置?已經上傳的影片怎麼加入位置? Mar 21, 2024 pm 06:00 PM

作為國內知名的短影片平台,快手為許多創作者提供了展現才華和分享生活的機會。在上傳影片時,一些新手創作者可能會困惑於如何更改影片發布位置。本文將為您介紹快手影片發布位置的更改方法,並分享一些快手影片發布的技巧,幫助您更好地利用這個平台展示自己的作品。一、快手發佈於哪裡怎麼改位置? 1.發布介面:在快手APP中,點選「發布」按鈕,進入影片發佈介面。 2.位置資訊:在發佈介面,有「位置」欄,點選進入位置選擇介面。 3.更改位置:在位置選擇介面,點選「定位」按鈕,可以查看目前所在位置。如需更改位置,點擊「位

美團天天神券位置在哪_美團天天神券位置介紹 美團天天神券位置在哪_美團天天神券位置介紹 Mar 27, 2024 pm 05:11 PM

1.我們打開手機中的美團,然後在首頁點選左上角的外帶選項。 2.進入外帶的平台頁面之後,在首頁就可以看到有天天神券的板塊了,直接點擊。 3.進入天天神券之後,就會看到很多的活動,點擊完成,然後我們完成任務就可以獲得獎勵了。

See all articles