页面布局、盒子大小、浏览器窗口大小等几何定位

一、screen对象

1、height:设备窗口高度。

2、width:设备窗口宽度。

 

二、获得页面可视区域的大小：

window.innerWidth || document.body.clientWidth//整个页面的宽度

window.innerHeight || document.body.clientHeight//整个页面的高度

 

三、offset系列:

offsetHeight and offsetWidth: offsetHeight = height+padding(top+bottom)+border(top+bottom) ; offsetWidth = width+padding(left+right)+border(left+right)

offsetLeft and offsetTop:到距离自身最近的自带定位(relative or absolute)的父级元素的左侧/顶部，没有定位则以body为准；offsetLeft是自身border到父元素的padding,没有包括父元素的border-left。

offsetParent:获得父元素的引用。

 

四、scroll系列：

scrollWidth and scrollHeight :对象内部的实际内容(content +padding) 不包括border

scrollTop and scrollLeft:不包括元素本身的border-top/border-left

 

五、client系列：

clientX and clientY : clientX = width + padding(left+right) ; clientY = height + padding(top+bottom)