开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js得到页面高度

在JavaScript中获取页面高度通常涉及到window.innerHeight、document.documentElement.clientHeight或者document.body.scrollHeight这几个属性，具体使用哪个取决于你想要获取的高度类型。

基础概念

window.innerHeight：这个属性返回浏览器窗口的视口（viewport）高度，包括滚动条（如果存在的话）。
document.documentElement.clientHeight：这个属性返回HTML文档的根元素（<html>）的可视区域高度，不包括滚动条。
document.body.scrollHeight：这个属性返回整个文档的高度，包括由于溢出而不可见的内容。

应用场景

当你需要知道用户当前可见的页面区域大小时，可以使用window.innerHeight或document.documentElement.clientHeight。
当你需要知道整个文档的高度，以便于实现滚动加载或者分页功能时，可以使用document.body.scrollHeight。

示例代码

// 获取浏览器窗口的视口高度
var viewportHeight = window.innerHeight;
console.log("Viewport Height: " + viewportHeight);

// 获取HTML文档的可视区域高度
var documentHeight = document.documentElement.clientHeight;
console.log("Document Height: " + documentHeight);

// 获取整个文档的高度
var scrollHeight = document.body.scrollHeight;
console.log("Scroll Height: " + scrollHeight);

注意事项

在不同的浏览器和设备上，这些属性的表现可能会有所不同。
当页面内容动态变化时（例如，通过AJAX加载更多内容），可能需要重新计算页面高度。
如果页面使用了CSS的transform属性，可能会影响到scrollHeight的计算。

解决问题的方法

如果你发现获取的页面高度不准确，可以尝试以下方法：

确保DOM已经完全加载：在获取页面高度之前，确保所有的HTML元素都已经加载完成。你可以将获取高度的代码放在window.onload事件中，或者使用DOMContentLoaded事件。

window.onload = function() {
    var height = document.documentElement.clientHeight;
    console.log(height);
};

考虑CSS的影响：检查是否有CSS样式影响了页面布局，比如使用了margin、padding、border或者box-sizing属性。
监听窗口大小变化：如果页面高度会随着窗口大小的变化而变化，你可以监听resize事件来动态获取新的高度。

window.addEventListener('resize', function() {
    var height = window.innerHeight;
    console.log(height);
});

使用现代API：如果需要更精确的控制和兼容性，可以考虑使用ResizeObserver API来监听元素尺寸的变化。

var ro = new ResizeObserver(entries => {
    for (let entry of entries) {
        const height = entry.contentRect.height;
        console.log(height);
    }
});

ro.observe(document.body);

确保在使用这些方法时，考虑到不同浏览器的兼容性问题，并进行相应的适配。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭