【JavaScript】页面宽度和高度_js设置页面宽度-优快云博客

本文链接：https://blog.youkuaiyun.com/csdou/article/details/6965949

本文介绍了一种JavaScript方法来获取网页的各种尺寸信息，包括可见区域的宽高、正文的宽高、滚动条的位置等，并提供了屏幕分辨率及可用工作区大小的获取方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

s = " ";
s += "\r\n网页可见区域宽："+ document.body.clientWidth;
s += "\r\n网页可见区域高："+ document.body.clientHeight;

s += "\r\n网页可见区域宽："+ document.body.offsetWidth +" (包括边线的宽)";
s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";

s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
s += "\r\n网页正文全文高："+ document.body.scrollHeight;

s += "\r\n网页被卷去的高："+ document.body.scrollTop;
s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
s += "\r\n网页正文部分上："+ window.screenTop;
s += "\r\n网页正文部分左："+ window.screenLeft;

s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的宽："+ window.screen.width;

s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
alert(s);


function getPageSize()
{
    var xScroll, yScroll;     
    if (window.innerHeight && window.scrollMaxY) {     
        xScroll = document.body.scrollWidth; 
        yScroll = window.innerHeight + window.scrollMaxY; 
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac 
        xScroll = document.body.scrollWidth; 
        yScroll = document.body.scrollHeight; 
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari 
        xScroll = document.body.offsetWidth; 
        yScroll = document.body.offsetHeight; 
    } 

    var windowWidth, windowHeight; 
    if (self.innerHeight) {    // all except Explorer 
        windowWidth = self.innerWidth; 
        windowHeight = self.innerHeight; 
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 
        windowWidth = document.documentElement.clientWidth; 
        windowHeight = document.documentElement.clientHeight; 
    } else if (document.body) { // other Explorers 
        windowWidth = document.body.clientWidth; 
        windowHeight = document.body.clientHeight; 
    }     
     
    // for small pages with total height less then height of the viewport
    var pageHeight,pageWidth;
    if(yScroll < windowHeight)
    { 
        pageHeight = windowHeight;
    }
    else
    {  
        pageHeight = yScroll;             
    }

    if(xScroll < windowWidth)
    {     
        pageWidth = windowWidth;             
    }
    else
    { 
        pageWidth = xScroll;             
    }
    alert(pageHeight+"xxx"+pageWidth);
    //document.write("page height is : " + pageHeight + ""); 
    //document.write("page width is : " + pageWidth + ""); 
    
    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)  
    return arrayPageSize;
}

getPageSize();