首頁 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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

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

Win11的啟動路徑以及如何開啟它

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

詳細介紹如何在Windows 11上開啟環境變數設定

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

了解pip安裝包儲存的位置和結構

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

快手發佈於哪裡怎麼改位置?已經上傳的影片怎麼加入位置?

高德地圖家的位置怎麼改 高德地圖家的位置怎麼改 Feb 27, 2024 pm 07:31 PM

高德地圖家的位置怎麼改

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

星穹鐵道克勞克影視樂園摺紙小鳥位置

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

美團天天神券位置在哪_美團天天神券位置介紹

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

最後紀元競技場在哪

See all articles