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 年 7 月 9 日 · 3637 次点击
    这是一个创建于 3838 天前的主题,其中的信息可能已经有所发展或是发生改变。
    14 条回复    2015-07-10 23:19:28 +08:00
    uniquecolesmith
        1
    uniquecolesmith  
    OP
       2015 年 7 月 9 日
    垃圾百度搜到的都是错误答案~~
    yangg
        2
    yangg  
       2015 年 7 月 9 日   ❤️ 1
    $(window).height();

    如果是<! doctype html> 或者其它不是quicks mode 的dtd的话,用 document.documentElement.clientHeight
    adjusted
        3
    adjusted  
       2015 年 7 月 9 日   ❤️ 1
    window.innerHeight?
    uniquecolesmith
        4
    uniquecolesmith  
    OP
       2015 年 7 月 9 日
    @yangg 需要纯js的,不想用jquery, document.docuementElement.clientHeight只能获取没有滚动条时的高度, 有滚动条就不行了

    @adjusted 不行
    yangg
        5
    yangg  
       2015 年 7 月 9 日   ❤️ 1
    。。。可视高度,
    $(document).height();

    document.body.clientHeight;
    emric
        6
    emric  
       2015 年 7 月 9 日   ❤️ 1
    document.documentElement.clientHeight
    emric
        7
    emric  
       2015 年 7 月 9 日   ❤️ 1
    刚才没细看上面的回复, 有滚动条或加载动态内容后有滚动条, 应该在 resize 和 onload 还有 AJAX 后, 重新获取.
    uniquecolesmith
        8
    uniquecolesmith  
    OP
       2015 年 7 月 9 日
    @yangg 不要JQ,...body... 不对啊

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