【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

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

相关推荐
hj5914_前端新手3 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法3 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku4 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode4 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu4 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu4 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu4 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu4 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu4 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在4 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net