js 獲取html 控制項座標

2021-08-25 13:06:27 字數 1925 閱讀 8194

假設 obj 為某個 html 控制項。

obj.offsettop 指 obj 距離上方或上層控制項的位置,整型,單位畫素。

obj.offsetleft 指 obj 距離左方或上層控制項的位置,整型,單位畫素。

obj.offsetwidth 指 obj 控制項自身的寬度,整型,單位畫素。

obj.offsetheight 指 obj 控制項自身的高度,整型,單位畫素。

我們對前面提到的「上方或上層」與「左方或上層」控制項作個說明。

例如:「提交」按鈕的 offsettop 指「提交」按鈕距「tool」層上邊框的距離,因為距其上邊最近的是 「tool」 層的上邊框。

「重置」按鈕的 offsettop 指「重置」按鈕距「tool」層上邊框的距離,因為距其上邊最近的是 「tool」 層的上邊框。

「提交」按鈕的 offsetleft 指「提交」按鈕距「tool」層左邊框的距離,因為距其左邊最近的是 「tool」 層的左邊框。

「重置」按鈕的 offsetleft 指「重置」按鈕距「提交」按鈕右邊框的距離,因為距其左邊最近的是「提交」按鈕的右邊框。

offsettop 可以獲得 html 元素距離上方或外層元素的位置,style.top 也是可以的,二者的區別是:

一、offsettop 返回的是數字,而 style.top 返回的是字串,除了數字外還帶有單位:px。

二、offsettop 唯讀,而 style.top 可讀寫。

三、如果沒有給 html 元素指定過 top 樣式,則 style.top 返回的是空字串。

offsetleft 與 style.left、offsetwidth 與 style.width、offsetheight 與 style.height 也是同樣道理。

scrollheight: 獲取物件的滾動高度。  

scrollleft:設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離

scrolltop:設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離

scrollwidth:獲取物件的滾動寬度

offsetheight:獲取物件相對於版面或由父座標 offsetparent 屬性指定的父座標的高度

offsetleft:獲取物件相對於版面或由 offsetparent 屬性指定的父座標的計算左側位置

offsettop:獲取物件相對於版面或由 offsettop 屬性指定的父座標的計算頂端位置  

event.clientx 相對文件的水平座標

event.clienty 相對文件的垂直座標

event.offsetx 相對容器的水平座標

event.offsety 相對容器的垂直座標  

document.documentelement.scrolltop 垂直方向滾動的值

event.clientx+document.documentelement.scrolltop 相對文件的水平座標+垂直方向滾動的量  

以上主要指ie之中,firefox差異如下:

ie6.0、ff1.06+:

clientwidth = width + padding

clientheight = height + padding

offsetwidth = width + padding + border

offsetheight = height + padding + border

ie5.0/5.5:

clientwidth = width - border

clientheight = height - border

offsetwidth = width

offsetheight = height

(需要提一下:css中的margin屬性,與clientwidth、offsetwidth、clientheight、offsetheight均無關)

獲取 設定控制項座標

獲取座標的方法 getlocationonscreen 計算該檢視在全域性座標系中的x,y值,注意這個值是要從螢幕頂端算起,也就是索包括了通知欄的高度 獲取在當前螢幕內的絕對座標 getlocationinwindow 計算該檢視在它所在的widnow的座標x,y值,獲取在整個視窗內的絕對座標 ge...

如何獲取控制項座標

一 monkeyrecorder獲取座標 1 啟動monkeyrecorder 首先真機或模擬器連線上電腦 以夜神模擬器為例,cmd輸入adb connect 127.0.0.1 62001 連線成功後,cmd輸入adb devices檢視已連線真機或模擬器裝置的名稱 cmd輸入monkeyrunn...

js獲取元素座標

function getelementpos elementid var parent null var pos var box if el.getboundingclientrect ie else if document.getboxobjectfor gecko else safari ope...