likes
comments
collection
share

【JS笔记】JS获取视窗、页面、DOM等各类高度

作者站长头像
站长
· 阅读数 8

浏览器内各类高度

一图获取各类高度 【JS笔记】JS获取视窗、页面、DOM等各类高度 主要通过系统提供的 window、document 来获取高度：

  1. 屏幕分辨率高度 window.screen.height
  2. 屏幕可用高度 window.screen.availHeight
  3. 浏览器高度（不含浏览器1px边框） window.outerHeight
  4. 浏览器视窗高度 window.innerHeight

<html></html 或 <body></body> 标签会默认充满视窗，所以视窗高度也可以是：document.documentElement.clientHeight、document.body.clientHeight

  1. 页面滚动高度 document.body.scrollTop
  2. 元素高度 DOM.offsetHeight

元素高度默认不包括 margin border padding，如果设置了 box-sizing: border-box; 那么高度会包括 padding。

*将以上 height 替换成 width 即可得到相应宽度。

鼠标事件中的边距

一图获取事件中的各类边距 【JS笔记】JS获取视窗、页面、DOM等各类高度

获取事件 event 触发位置与各个层级的边界距离，在事件触发函数内 (e) => {}：

  1. 在当前 DOM 中的相对位置 e.offsetX, e.offsetY （可联想 DOM 高度 offsetHeight 来加深记忆）
  2. 在视窗中的相对位置 e.clientX, e.clientY （可联想视窗高度 document.body.clientHeight）
  3. 在当前页面中的相对位置 e.pageX, e.pageY
  4. 在系统桌面中的相对位置 e.screenX, e.screenY （是的，没看错，是系统桌面！包括扩展桌面！）

总结

通过以上两节内容了解了通过 JavaScript 获取各类高度、相对位置的方法，重点记住最常用的：

  • 视窗高度 window.innerHeight / document.body.clientHeight
  • DOM高度 DOM.offsetHeight
  • 事件触发位置的相对位置 e.()X, e.()Y， 其中 视窗 client，页面 page，DOM offset

笔记主要为自用，如有错漏欢迎指正，友好交流！