随心掌控，轻松获取屏幕高度：JavaScript 终极指南

2023-10-17 00:38:32

JavaScript 作为现代 Web 开发的基石之一，为我们提供了获取屏幕高度的多种方式，让我们能够更加灵活地控制页面布局，优化用户体验。在本文中，我们将深入探讨这些获取屏幕高度的方法，带领您领略 JavaScript 的强大功能。

方法 1：浏览器窗口

浏览器窗口是获取屏幕高度最直接的方式。我们可以通过 window.innerHeight 属性来获取窗口的高度，单位为像素。

// 使用 window.innerHeight 获取浏览器窗口高度
const windowHeight = window.innerHeight;

// 输出窗口高度
console.log("浏览器窗口高度：", windowHeight);

方法 2：文档对象

文档对象表示整个 HTML 文档，我们可以通过 document.documentElement.clientHeight 属性来获取文档的高度，单位同样为像素。

// 使用 document.documentElement.clientHeight 获取文档高度
const documentHeight = document.documentElement.clientHeight;

// 输出文档高度
console.log("文档高度：", documentHeight);

方法 3：CSS

CSS 也可以用于获取屏幕高度，不过需要用到 JavaScript 来访问 CSS 属性。我们可以通过 window.getComputedStyle() 方法获取元素的 CSS 属性，然后通过 height 属性来获取屏幕高度。

// 使用 window.getComputedStyle() 获取 CSS 属性
const cssHeight = window.getComputedStyle(document.documentElement).getPropertyValue("height");

// 输出 CSS 高度
console.log("CSS 高度：", cssHeight);