JS獲取各種寬度 高度的簡單介紹

js獲取各種寬度、高度的簡單介紹：

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

offsetwidth (width+padding+border)

假設 obj 為某個 html 控制項。

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

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

obj.offsetwidth 指 obj 控制項自身的寬度，整型，單位畫素。獲取物件可見內容的寬度，不包括滾動條，不包括邊框；

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

offsetwidth 與 style.width 的區別

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

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

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

JS獲取各種寬度 高度的簡單介紹

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

JS獲取各種寬度 高度的簡單介紹

js獲取各種寬度 高度的簡單介紹 scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offse...

JS獲取各種寬度 高度的簡單介紹

js獲取各種寬度 高度的簡單介紹 scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offse...