V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
uniquecolesmith
V2EX  ›  JavaScript

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

  •  
  •   uniquecolesmith · 2015-07-09 21:16:11 +08:00 · 3285 次点击
    这是一个创建于 3403 天前的主题,其中的信息可能已经有所发展或是发生改变。
    14 条回复    2015-07-10 23:19:28 +08:00
    uniquecolesmith
        1
    uniquecolesmith  
    OP
       2015-07-09 21:16:41 +08:00
    垃圾百度搜到的都是错误答案~~
    yangg
        2
    yangg  
       2015-07-09 21:22:07 +08:00   ❤️ 1
    $(window).height();

    如果是<! doctype html> 或者其它不是quicks mode 的dtd的话,用 document.documentElement.clientHeight
    adjusted
        3
    adjusted  
       2015-07-09 21:26:52 +08:00   ❤️ 1
    window.innerHeight?
    uniquecolesmith
        4
    uniquecolesmith  
    OP
       2015-07-09 21:31:08 +08:00
    @yangg 需要纯js的,不想用jquery, document.docuementElement.clientHeight只能获取没有滚动条时的高度, 有滚动条就不行了

    @adjusted 不行
    yangg
        5
    yangg  
       2015-07-09 21:32:00 +08:00   ❤️ 1
    。。。可视高度,
    $(document).height();

    document.body.clientHeight;
    emric
        6
    emric  
       2015-07-09 21:40:23 +08:00   ❤️ 1
    document.documentElement.clientHeight
    emric
        7
    emric  
       2015-07-09 21:49:43 +08:00   ❤️ 1
    刚才没细看上面的回复, 有滚动条或加载动态内容后有滚动条, 应该在 resize 和 onload 还有 AJAX 后, 重新获取.
    uniquecolesmith
        8
    uniquecolesmith  
    OP
       2015-07-09 22:06:27 +08:00
    @yangg 不要JQ,...body... 不对啊

    @emric 就是在onload后获取的,不对,不知道哪出问题了
    emric
        10
    emric  
       2015-07-09 22:23:15 +08:00   ❤️ 1
    @uniquecolesmith 你可以试着写个 demo 让大家看看, 话说 x 的滚动条很少会用到吧.
    emric
        11
    emric  
       2015-07-09 22:28:45 +08:00
    还有我再纠正一下, 我上面的 7L 的回复应该是: "调整窗口有滚动条或者加载动态内容后有滚动条, 应该在 resize 和 onload 还有 AJAX 后, 重新获取. "
    语死早, 没办法.. ʅ(´◔౪◔)ʃ
    Biwood
        12
    Biwood  
       2015-07-09 23:25:46 +08:00   ❤️ 1
    看了下楼主的回复,难道他说的不是 document.documentElement.offsetHeight 么?
    uglyer
        13
    uglyer  
       2015-07-10 10:41:27 +08:00   ❤️ 1
    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
        14
    uniquecolesmith  
    OP
       2015-07-10 23:19:28 +08:00
    @emric 看到了; 我试试,谢谢
    @Biwood 不是不是,我发现应该是clientHeight, 但是我打开方式有点问题
    @uglyer 3Q, 谢谢你的代码
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1223 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 18:23 · PVG 02:23 · LAX 11:23 · JFK 14:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.