js獲取物件位置的方法

2022-04-04 13:46:22 字數 1720 閱讀 7381

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均無關)

測試**:

code:

[copy to clipboard]

">

" lang="gb2312">

getclientwidth();

getclientheight();

getoffsetwidth();

getoffsetheight();

ie6.0、ff1.06+:

clientwidth = width + padding = 300+10×2 = 320

clientheight = height + padding = 200+10×2 = 220

offsetwidth = width + padding + border = 300+10×2+10×2= 340

offsetheight = height + padding + border = 200+10×2+10×2 = 240

ie5.0/5.5:

clientwidth = width - border = 300-10×2 = 280

clientheight = height - border = 200-10×2 = 180

offsetwidth = width = 300

offsetheight = height = 200

js獲取物件位置的方法

scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offsetheight 獲取物件相對於版面...

js元素相關位置的獲取方法

元素.clientwidth 寬度加內邊距 元素.clientheight 高度加內邊距 元素.clientleft 左邊框的寬度 元素.clienttop 上邊框的寬度 獲取可視區域的寬高 document.documentelement.clientwidth document.body.cli...

js獲取滑鼠位置的各種方法

在一些dom操作中我們經常會跟元素的位置打交道,滑鼠互動式乙個經常用到的方面,令人失望的是不同的瀏覽器下會有不同的結果甚至是有的瀏覽器下沒結果,這篇文章就上滑鼠點選位置座標獲取做一些簡單的總結,沒特殊宣告 在ie8,firefox,chrome下進行測試相容 相對於螢幕 如果是涉及到滑鼠點選確定位置...