使用 JS 获取高度 - Javascript

在前端开发中，有时候需要获取元素的高度信息，以便进行页面排版或者布局的计算。Javascript 是一种能够操作文档对象模型（DOM）的脚本语言，可以通过一些简单的方法来获取元素的高度信息。

通过元素对象获取高度信息

在 Javascript 中，我们可以通过访问 DOM 元素对象来获取其高度信息。有两种方法可以实现此操作：

1. offsetHeight 属性

offsetHeight 是一个只读属性，用于返回元素的像素高度，包括元素的垂直内边距、水平滚动条占用的空间（如果存在）、高度以及垂直滚动条占用的空间（如果存在）。

const element = document.getElementById('yourElementId');
const height = element.offsetHeight;

2. clientHeight 属性

clientHeight 也是一个只读属性，用于返回元素的像素高度，但不包括元素的外边距、边框或滚动条占用的空间。

const element = document.getElementById('yourElementId');
const height = element.clientHeight;

通过窗口对象获取高度信息

除了通过元素对象获取高度信息之外，我们还可以通过窗口对象来获取网页视口的高度信息。

1. innerHeight 属性

窗口的 innerHeight 属性返回窗口文档视口的高度，即浏览器窗口可视区域的高度，不包括浏览器的工具栏、标签栏以及水平滚动条等控件占用的空间。

const windowHeight = window.innerHeight;

2. screen.height 属性

screen.height 属性返回当前屏幕的高度，不考虑浏览器窗口是否被缩放或拉伸。

const screenHeight = screen.height;

结论

以上介绍了通过 Javascript 获取元素高度的两种方法：通过元素对象获取高度属性 offsetHeight 或 clientHeight，以及通过窗口对象获取页面视口的高度属性 innerHeight。使用这些方法，我们可以通过简单的代码为页面设计和布局提供重要的数据支持。