offsetLeft,clientX ,offsetWidth... 定義和區別


關於元素大小位置等信息的一些屬性。有:
clientLeftclientTop
clientWidthclientHeight
offsetLeftoffsetTop
offsetParent
offsetWidthoffsetHeight
scrollLeftscrollTop
scrollWidthscrollHeight

 


clientLeft,clientTop:表示內容區域的左上角相對於整個元素左上角的位置(包括邊框)。(取決於邊框的像數值?)

clientWidth,clientHeight:內容區域的寬高,不包括邊框寬度值。

offsetLeft,offsetTop:相對於最近的祖先定位元素。

offsetParent:某元素的父元素 例如:this.offsetParent.tagName.toLowerCase() 得到body...

offsetWidth,offsetHeight 整個元素的尺寸(不包括變寬的寬度)

scrollLeft,scrollTop:元素滾動的大小

scrollWidth,scrollHeight:整個內容區域的寬度(包括需拉動滾動條隱藏起來的那些部分) scrollTop+clientWidth

 

 

 



scrollWidth:獲取對象的滾動寬度 
scrollHeight: 獲取對象的滾動高度。 
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離 
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離

offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置 
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置

event.clientX 相對文檔的水平座標 
event.clientY 相對文檔的垂直座標 
event.offsetX 相對容器的水平坐標 
event.offsetY 相對容器的垂直坐標

 

scrollHeight: 對象的滾動高度(滾動條的高度,可滾動的高度)

scrollWidth: 對象的滾動寬度(同上)

scrollLeft: 對象左邊界和窗口中目前可見內容的左端之間的距離(滾動條已滾動的距離)

scrollTop: 對象最頂端和窗口中可見內容的最頂端之間的距離(同上)

offsetHeight: 對象相對於版面或offsetParent 的高度(可見部分的寬度加上滾動條實體的寬度)

offsetWidth: 對象相對於版面或offsetParent 的寬度

offsetLeft: 對象相對於版面或由 offsetParent 左側位置

offsetTop:對象相對於版面或由 offsetTop 頂端位置

clientX: 相對文檔的水平坐標

clientY: 相對文檔的垂直坐標

clientWidth:相對文檔的寬度(可見部分的寬度)

clientHeight:相對文檔的高度

event.offsetX: 相對容器的水平坐標

event.offsetY : 相對容器的垂直坐標

 

轉:http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM