怎样使用JavaScript获取页面的高度？

在日常开发任务中，前端需要我们得到可见区域的宽度和高度。特别是对于拖动相关的应用，需要判断拖动的边界值。由于实际的需要，于是在网上找到了相关的文章，然后加以整理，通过自己的理解描述一下，共需要的开发朋友们参考。详细信息请看正文。（注意：下面只展示通过纯JavaScript来获取，如果你使用前端框架就不需要考虑兼容问题了，如：JQuery）

什么是可见区域？

从字面上面解释就是我们可以看见的区域，实际上面也是如此。在浏览器中，由于内容太多，浏览器的屏幕太小不能一次全部显示，此时浏览器就出现了滚动条，可见区域及不通过滚动条就可以看见的区域称为可见区域。

浏览器兼容

IE浏览器

FireFox浏览器

Opera浏览器 

而如果没有定义W3C的标准（即没有添加<DOCTYPE>标签）

IE浏览器为：

FireFox为：

Opera为：

从上面可以看出，要想准确获取屏幕的大小不是一件容易的事情。

javascript广告位

获取屏幕常见属性说明

工具方法

1、取窗口滚动条高度 

/**
 * 取窗口滚动条高度 
 */
function getScrollTop() {
    var scrollTop=0;
    if ( document.documentElement && document.documentElement.scrollTop ) {
        scrollTop=document.documentElement.scrollTop;
    } else if( document.body ) {
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
}

2、取窗口可视范围的高度 

/**
 * 取窗口可视范围的高度 
 */
function getClientHeight() {
    var clientHeight = 0;
    if ( document.body.clientHeight && document.documentElement.clientHeight ) {
        var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? 
                                            document.body.clientHeight : document.documentElement.clientHeight;        
    } else {
        var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ?
                                            document.body.clientHeight : document.documentElement.clientHeight;    
    }
    return clientHeight;
}

3、取文档内容实际高度 

/**
 * 取文档内容实际高度 
 */
function getScrollHeight() {
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}