极客笔记JS获取窗口高度
在网页开发中，有时候我们需要获取浏览器窗口的高度，以便进行一些操作。使用JavaScript可以很方便地获取当前浏览器窗口的高度，并且可以随着窗口大小的变化同步更新。
方法一：使用window.innerHeight
JavaScript中提供了一个属性window.innerHeight，可以直接获取浏览器窗口的高度，无需任何额外操作。这个属性返回的是视口（viewport）的高度，即浏览器窗口除去工具栏、滚动条等其他元素后的高度。
const windowHeight = window.innerHeight;
console.log(windowHeight);
上述代码中，我们使用window.innerHeight获取当前浏览器窗口的高度，并将其存储在windowHeight变量中。然后使用console.log输出窗口的高度。
方法二：使用document.documentElement.clientHeight
除了window.innerHeight以外，还可以通过document.documentElement.clientHeight获取窗口的高度。这个属性返回的也是视口的高度，但是在一些情况下可能会有所不同。可以根据具体需求选择使用哪种方式。
const documentHeight = document.documentElement.clientHeight;
console.log(documentHeight);
监听窗口大小变化
如果需要在窗口大小变化时实时获取窗口的高度，可以通过监听resize事件来实现。当窗口大小发生变化时，会触发resize事件，我们可以在事件处理函数中获取最新的窗口高度。
window.addEventListener('resize', function() {
const windowHeight = window.innerHeight;
console.log(windowHeight);
});
上述代码中，我们通过addEventListener方法监听了resize事件，当窗口大小发生变化时，会执行回调函数。在回调函数中使用window.innerHeight获取最新的窗口高度，并输出到控制台。
实际应用场景
获取窗口高度在实际开发中有许多应用场景，例如：
- 动态调整元素的大小和位置：根据窗口的高度，可以动态调整页面中元素的大小和位置，以适应不同的设备屏幕大小。
-
响应式布局设计：在响应式网页设计中，需要根据窗口的高度和宽度来调整布局，以实现在不同设备上的良好显示效果。
-
懒加载：当页面内容较多时，可以根据窗口的高度和滚动位置来判断何时加载更多内容，以提升用户体验。
综上所述，通过JavaScript可以轻松获取浏览器窗口的高度，并应用于各种实际场景中，帮助我们开发出更加灵活和适应性强的网页。