JS获取vh值 - JavaScript

在web开发中，我们经常会遇到需要使用可视窗口高度（viewport height，vh）的情况，比如在响应式设计中设置元素高度为屏幕高度的一部分。在本文中，我们将介绍如何在JavaScript中获取可视窗口高度。

window.innerHeight

获取可视窗口高度的最简单方法是使用JavaScript的window.innerHeight属性。该属性返回视口高度（即除去导航栏、滚动条等其他非内容的高度）的像素值。以下是获取可视窗口高度的示例代码：

const vh = window.innerHeight;
console.log(`${vh}px`);

使用模板文字将像素值与“px”拼接，方便输出到控制台查看。

值得注意的是，window.innerHeight返回的是当前的视口高度，当视口发生变化（如浏览器窗口大小改变）时，该值也会相应改变。

window.getComputedStyle

如果需要获取视口高度的百分比值，可以借助window.getComputedStyle方法。该方法返回与某个元素的最终计算样式相关的所有属性值，包括width、height、margin、padding等等。以下是获取可视窗口高度百分比的示例代码：

const computedStyle = window.getComputedStyle(document.documentElement);
const vh = parseInt(computedStyle.getPropertyValue('height'), 10) / 100;
console.log(`${vh}vh`);

首先，我们获取document.documentElement节点（即文档的根元素），然后使用window.getComputedStyle方法获取该元素的计算样式。接着，使用getPropertyValue方法获取height属性的值，使用parseInt方法将其转换为整数，并将结果除以100，得到可视窗口高度的百分比。最后，同样使用模板文字将结果输出。

需要注意的是，这种方式获取的百分比值并不是实时的，当视口发生变化时，该值也不会随之改变，所以通常需要配合window.onresize事件来实时更新视口高度的百分比值。

window.onresize = function() {
  const computedStyle = window.getComputedStyle(document.documentElement);
  const vh = parseInt(computedStyle.getPropertyValue('height'), 10) / 100;
  console.log(`${vh}vh`);
}

以上就是获取可视窗口高度的两种方法，开发者们可以根据自己的需求来选择使用哪种方式。