有時候專案中會用到用js獲取元素位置來定位元素,首先通過說明scrollwidth,clientwidth,offsetwidth的關係。
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獲取各種寬度,高度解釋
紅色是大塊的邊框,藍色是小塊的邊框,藍框外白色區域是大塊的 padding 或 和 小塊的 margin 或其他元素或其他原因造成的空白。obj.offsettop 指 obj 相對於版面或由 offsetparent 屬性指定的父座標的計算上側位置,整型,單位畫素 obj.offsetleft 指...
JS獲取各種寬度 高度的簡單介紹
js獲取各種寬度 高度的簡單介紹 scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offse...
JS獲取各種寬度 高度的簡單介紹
scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offsetheight 獲取物件相對於版面...