| JS 获取屏幕/浏览器/页面元素相对距离与宽高 | 您所在的位置：网站首页 › html获取手机位置 › JS 获取屏幕/浏览器/页面元素相对距离与宽高 |
JS 获取屏幕/浏览器/页面元素相对距离与宽高
|
系统屏幕信息
这个是设备显示屏的高度，各个机型的显示屏高度都不一样，可以在系统设置中看 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。 |
【本文地址】