- 系统屏幕信息
- 浏览器信息
- 页面信息
- 获取body的高(不含边框)
- 获取body的高(含边框)
- 获取整个网页的高
- 获取元素相对距离或位置
- 获取滚动条到top和left的距离
- 获取某个元素相对于视窗的位置
- 获取元素到顶部或左部的距离
系统屏幕信息
- window.screen.height
这个是设备显示屏的高度,各个机型的显示屏高度都不一样,可以在系统设置中看
- window.screen.availHeight
屏幕的可用高度,一般是显示屏高度减去显示屏任务栏的高度
screen.availHeight = screen.height - 任务栏高度
注; 更改显示器的缩放倍数,会影响到获取的值,比如屏幕放大125%,则原本1080高度的值,读取后为864。即1080 / 1.25 = 864
浏览器信息
- window.outerHeight
浏览器的高度,高度改变,会改变值的大小 - window.innerHeight
浏览器的可用高度 = 浏览器高度 - 顶部工具栏
若有调试面板还会再减去调度面板的高度,最后得出的才是可用高度
页面信息
获取body的高(不含边框)
document.body.clientHeight
:body的高度
clientHeight = padding + height
获取body的高(含边框)
document.body.offsetHeight
:body的高度(包含border)
offsetHeight = padding + height + border
offsetHeight 和 clientHeight 的高度区别就在于边框高度
获取整个网页的高
document.body.scrollHeight
,为网页可见高度加上未显示的网页的高度(滚动条未显示部分)。
有些情况获取的是某个滚动元素总体高度,可以对明确的元素使用document.querySelector(domEle).scrollHeight
与document.body.clientHeight
结果基本一致
获取元素相对距离或位置
获取滚动条到top和left的距离
document.body.scrollTop
||document.documentElement.scrollTop
:获取滚动条到顶部的距离document.body.scrollLeft
||document.documentElement.scrollLeft
: 获取滚动条到左边的距离
获取某个元素相对于视窗的位置
getBoundingClientRect
用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
1. 语法:这个方法没有参数。
rectObject = document.querySelector(selectorDom).getBoundingClientRect();
2. 返回值类型:
- rectObject.top:元素上边到视窗上边的距离;
- rectObject.right:元素右边到视窗左边的距离;
- rectObject.bottom:元素下边到视窗上边的距离;
- rectObject.left:元素左边到视窗左边的距离;
获取元素到顶部或左部的距离
document.querySelector(selectDom).offsetTop
:获取元素到顶部的距离document.querySelector(selectDom).offsetLeft
:获取元素到左边的距离
- offsetTop:元素到offsetParent顶部的距离
- offsetParent:距离元素最近的一个具有定位的祖宗元素(relative,absolute,fixed),若祖宗都不符合条件,offsetParent为body。如下图所示:获取child的offsetTop,图1的offsetParent为father,图2的offsetParent为body。
- 注意:只有元素show(渲染完成)才会计算入offsetTop,若是中间有元素数据需要异步获取,会导致最终获取的offsetTop值偏小