View On GitHub

页面尺寸

注意区分window和document的区别

Window对象表示浏览器中打开的窗口；window对象可以省略。比如alert()、window.alert()。 Document对象是Window对象的一部分。那么document.body 我们可以写成window.document.body；浏览器的HTML文档成为Document对象。

window

window.screen.height
```
iHeight = window.screen.height
```

window.screen.avialHeight【只读】

availHeight = window.screen.availHeight

window.screenY【只读】
```
lLoc = window.screenY 
```

window.innerHeight【只读】
```
intViewportHeight = window.innerHeight
```

window.outerHeight【只读】
```
outWindowHeight = window.outerHeight
```

window.scrollTo
```
window.scrollTo(x-coord, y-coord)
```

document

element.clientHeight【只读】

var h = element.clientHeight   //cssHeight + padding

HTMLElement.offsetHeight【只读】

var intElemOffsetHeight = element.offsetHeight   //cssHeight + padding +border

Element.scrollHeight【只读】

var intElemScrollHeight = element.scrollHeight   //entireHeight(容器总高度)

Element.clientTop【只读】
```
vartop = element.clientTop   //border
```

HTMLElement.offsetTop【只读】

topPos = element.offsetTop   //offsetParent 距离

Element.scrollTop【可写】

var  intElemScrollTop = someElement.scrollTop
element.scrollTop = intValue   //滚动高度

Event对象坐标

screenX和screenY （相对于用户屏幕）
clientX和clientY （相对于浏览器窗口）
pageX和pageY （相对于整张页面/包括隐藏部分）
offsetX和offsetY （相对于事件源）

==============

// 元素可见尺寸 getClientRects(); // 元素超出也可获取 getBoundingClientRect()。

参考：