区分屏幕screen，视口viewport，浏览器window,文档document，body
- 屏幕screen：显示器的特性不会变化，screen.width; screen.height; 即分辨率的大小
- 浏览器窗口window: 内在尺寸 window.innerHeight; window.innerWidth;包含滚动条
- 视口viewport： 浏览器窗口的可视区域，可以通过document.documentElement.clientWidth与document.documentElement.clientHeight获取（不包含滚动条）
- document： document.documentElement 返回整个
<html></html> - body: document.body返回
<body></body>
document,screen 是window下的属性，body是document的属性
宽高
- offsetWidth / offsetHeight=边框+内边距+width/height
- clientHeight: 不涉及滚动条时,clientHeight=offsetHeight-边框; clientWidth: 不涉及滚动条时,clientWidth=offsetWidth-边框
- 可视区域宽高： document.body.clientWidth / clientHeight; document.documentElement.clientHeight / clientWidth 随着窗口的变化而改变
- scrollWidth / scrollHeight: 一个元素内容宽高，包括由于溢出导致的视图中不可见内容。 没有滚动条时=clientHeight
offsetWidth / offsetHeight 带边框； clientWidth / clientHeight 、 scrollWidth / scrollHeight 不带滚动条、边框和外边距
滚动大小
- scrollLeft： 滚动条向左滚动的大小；
- scrollTop：滚动条向上滚动的大小 IE7及以下 document.body.scrollTop； 当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
- 为style.top 赋值时，会对scrollTop有影响
- document 或 window 触发
- document.documentElement.scrollTop获取窗口滚动条向上滚动的大小
- scrollIntoView(false);参数:true（默认）:元素和页面顶对齐； false:元素和页面底对齐
判断元素是否滚动到底部：元素整个高度 减去 向上滚动的高度 = 可视区内的高度
element.scrollHeight - element.scrollTop === element.clientHeight
坐标位置
- event.pageX event.pageY 鼠标 和 document 页面左上角的距离
- event.clientX event.clientY鼠标 和 浏览器可视区左上角的距离 （以可视窗口为基准的鼠标位置，与滚动条滚动无关）
- event.screenX event.screenY 鼠标和屏幕左上角的距离（以屏幕为准）
- offsetX offsetY 事件对象与目标节点的内填充边（padding edge）在 X / Y 轴方向上的偏移量。
偏移量 只读
- offsetLeft / offsetTop：当前元素距离offsetParent 内边距 左上角的水平/垂直距离。
offsetParent属性，返回值：dom元素的基准父元素 默认是body,除非给定位
- 当前元素 最近的包含该元素的定位元素或者最近的 table,td,th,body元素。
- 当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。
愿你熬过万丈孤独，藏下星辰大海~
971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
