📌  相关文章
📜  获取窗口高度 javascript (1)

📅  最后修改于: 2023-12-03 15:41:29.727000             🧑  作者: Mango

获取窗口高度 JavaScript

在 Web 开发中，经常需要获取窗口的高度。这在响应式设计、动态布局和其他各种 Web 应用程序中都是非常有用的。

本文将介绍如何使用 JavaScript 获取窗口高度，并提供一些使用实例。

使用内置对象获取窗口高度

使用 JavaScript 中的内置对象 window，我们可以轻松地获取窗口的高度。

我们可以使用 window.innerHeight 属性来获取当前窗口的高度。下面是使用了 window.innerHeight 属性的代码片段：

let windowHeight = window.innerHeight;
console.log("当前窗口的高度为：" + windowHeight);

以上代码中，windowHeight 变量将存储当前窗口的高度，并使用 console.log 输出窗口高度。

使用事件监听器动态获取窗口高度

我们还可以使用事件监听器来动态获取窗口高度。更具体地说，我们可以使用 resize 事件来监听窗口高度的更改。

以下代码片段将演示如何使用事件监听器获取窗口高度：

window.addEventListener('resize', () => {
  let windowHeight = window.innerHeight;
  console.log("当前窗口的高度为：" + windowHeight);
});

以上代码中，将添加一个 resize 事件监听器，每当窗口大小更改时，将输出窗口高度。

实例：自适应高度的页面元素

可以使用 JavaScript 获取窗口高度，并将其应用于页面元素，从而创建一个自适应高度的元素。

以下示例将演示如何创建一个 <div> 元素，使其始终与窗口高度相同：

<!DOCTYPE html>
<html>
<head>
  <title>页面自适应高度</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .container {
      height: 100vh;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">这是一个自适应高度的元素。</div>
  <script>
    let container = document.querySelector('.container');
    let windowHeight = window.innerHeight;
    container.style.height = windowHeight + "px";
  </script>
</body>
</html>

以上代码中，container 变量将获取 <div> 元素。windowHeight 变量被设置为当前窗口高度，然后设置 <div> 元素的高度。

总结

本文介绍了如何使用 JavaScript 获取窗口高度，并提供了一些实用示例。无论是应用于响应式设计、动态布局还是其他 Web 应用程序，获取窗口高度都是非常有用的技术。