【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.clientHeightdocument.body.clientHeight

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

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

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

鼠标事件中的边距

一图获取事件中的各类边距

获取事件 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

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

相关推荐
Software攻城狮几秒前
vite打包的简单配置
前端
Codebee几秒前
如何利用OneCode注解驱动,快速训练一个私有的AI代码助手
前端·后端·面试
流星稍逝1 分钟前
用vue3的写法结合uniapp在微信小程序中实现图片压缩、调整分辨率、做缩略图功能
前端·vue.js
知了一笑4 分钟前
独立开发问题记录-margin塌陷
前端
OEC小胖胖5 分钟前
深入理解 Vue.js 响应式原理及其在 Web 前端开发中的应用
开发语言·前端·javascript·vue.js·web
MMJC66 分钟前
Playwright MCP Batch:革命性的批量自动化工具,让 Web 操作一气呵成
前端·后端·mcp
POLOAPI6 分钟前
Windows 系统安装与使用 Claude Code 全攻略
前端·后端
胡gh7 分钟前
一次点击,让你明白浏览器事件传播机制与 React 合成事件
前端·react.js
不卷的攻城狮7 分钟前
【精通react】(三)为什么不建议使用 index 作为 key?
前端
邪恶美羊羊8 分钟前
fetch二次封装
前端