区分屏幕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。
愿你熬过万丈孤独,藏下星辰大海~