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

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3423 天前的主题，其中的信息可能已经有所发展或是发生改变。

页面

高度

获取

14 条回复 • 2015-07-10 23:19:28 +08:00

uniquecolesmith

2015-07-09 21:16:41 +08:00

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

yangg

2015-07-09 21:22:07 +08:00

$(window).height();

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

adjusted

2015-07-09 21:26:52 +08:00

window.innerHeight?

uniquecolesmith

2015-07-09 21:31:08 +08:00

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

@adjusted 不行

yangg

2015-07-09 21:32:00 +08:00

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

document.body.clientHeight;

emric

2015-07-09 21:40:23 +08:00

document.documentElement.clientHeight

emric

2015-07-09 21:49:43 +08:00

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

uniquecolesmith

2015-07-09 22:06:27 +08:00

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

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

learnshare

2015-07-09 22:11:30 +08:00

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

emric

2015-07-09 22:23:15 +08:00

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

emric

2015-07-09 22:28:45 +08:00

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

Biwood

2015-07-09 23:25:46 +08:00

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

uglyer

2015-07-10 10:41:27 +08:00

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

2015-07-10 23:19:28 +08:00

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