【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

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

相关推荐
七夜zippoe4 分钟前
前端开发中的难题及解决方案
前端·问题
晓13131 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor1 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军1 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺1 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到111 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡1 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu1 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂1 小时前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军1 小时前
React 实现多个节点 diff
前端·react.js·前端框架