JS 如何获取可视化页面的高度？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3954 days ago, the information mentioned may be changed or developed.

页面

高度

获取

14 replies • 2015-07-10 23:19:28 +08:00

uniquecolesmith

Jul 9, 2015

垃圾百度搜到的都是错误答案～～

yangg

Jul 9, 2015

$(window).height();

如果是<! doctype html> 或者其它不是quicks mode 的dtd的话，用 document.documentElement.clientHeight

adjusted

Jul 9, 2015

window.innerHeight?

uniquecolesmith

Jul 9, 2015

@yangg 需要纯js的，不想用jquery, document.docuementElement.clientHeight只能获取没有滚动条时的高度, 有滚动条就不行了

@adjusted 不行

yangg

Jul 9, 2015

。。。可视高度，
$(document).height();

document.body.clientHeight;

emric

Jul 9, 2015

document.documentElement.clientHeight

emric

Jul 9, 2015

刚才没细看上面的回复, 有滚动条或加载动态内容后有滚动条, 应该在 resize 和 onload 还有 AJAX 后, 重新获取.

uniquecolesmith

Jul 9, 2015

@yangg 不要JQ,...body... 不对啊

@emric 就是在onload后获取的，不对，不知道哪出问题了

learnshare

Jul 9, 2015

可以参考这里 https://github.com/LearnShare/blog/blob/master/posts/position-and-size.md
图片都在这里 https://github.com/LearnShare/blog/tree/master/posts/images

emric

Jul 9, 2015

@uniquecolesmith 你可以试着写个 demo 让大家看看, 话说 x 的滚动条很少会用到吧.

emric

Jul 9, 2015

还有我再纠正一下, 我上面的 7L 的回复应该是: "调整窗口有滚动条或者加载动态内容后有滚动条, 应该在 resize 和 onload 还有 AJAX 后, 重新获取. "
语死早, 没办法.. ʅ（´◔౪◔）ʃ

Biwood

Jul 9, 2015

看了下楼主的回复，难道他说的不是 document.documentElement.offsetHeight 么？

uglyer

Jul 10, 2015

if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
我用这段可以兼容绝大部分浏览器。

uniquecolesmith

Jul 10, 2015

@emric 看到了；　我试试，谢谢
@Biwood 不是不是，我发现应该是clientHeight, 但是我打开方式有点问题
@uglyer 3Q, 谢谢你的代码