JavaScript 获取滚动条高度+常用js页面宽度与高度

最新推荐文章于 2024-12-16 18:19:30 发布

转载最新推荐文章于 2024-12-16 18:19:30 发布

· 1.2k 阅读

文章标签：

#javascript #function #firefox #opera #工作 #文档

.NET与JavaScript 专栏收录该内容

43 篇文章

订阅专栏

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


// ********************
// *取窗口可视范围的高度
// ******************* 
function getClientHeight() {
    varclientHeight = 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;
}

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

详细说明：

//在IE中：
document.body.clientWidth               // BODY对象宽度
document.body.clientHeight              // BODY对象高度
document.documentElement.clientWidth    //可见区域宽度
document.documentElement.clientHeight   //可见区域高度
//在FireFox中：
document.body.clientWidth               // BODY对象宽度
document.body.clientHeight              // BODY对象高度
document.documentElement.clientWidth    //可见区域宽度
document.documentElement.clientHeight   //可见区域高度
//在Opera中：
document.body.clientWidth               // 可见区域宽度
document.body.clientHeight              // 可见区域高度
document.documentElement.clientWidth    //页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight   //页面对象高度（即BODY对象高度加上Margin高）
//而如果没有定义W3C的标准，则
//IE为：
document.documentElement.clientWidth    // 0
document.documentElement.clientHeight   // 0
//FireFox为：
document.documentElement.clientWidth    //页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight   // 页面对象高度（即BODY对象高度加上Margin高）
//Opera为：
document.documentElement.clientWidth    //页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight   // 页面对象高度（即BODY对象高度加上Margin高）

真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。

//网页可见区域宽:
document.body.clientWidth
//网页可见区域高:
document.body.clientHeight
//网页可见区域宽:
document.body.offsetWidth   //(包括边线的宽)
//网页可见区域高:
document.body.offsetHeight  //(包括边线的宽)
//网页正文全文宽:
document.body.scrollWidth
//网页正文全文高:
document.body.scrollHeight
//网页被卷去的高:
document.body.scrollTop
//网页被卷去的左:
document.body.scrollLeft
//网页正文部分上:
window.screenTop
//网页正文部分左:
window.screenLeft
//屏幕分辨率的高:
window.screen.height
//屏幕分辨率的宽:
window.screen.width
//屏幕可用工作区高度:
window.screen.availHeight
//屏幕可用工作区宽度:
window.screen.availWidth

来自：http://hi.baidu.com/snny2008/blog/item/97ca90080a0987ce63d986ab.html