Javascript擷取浏覽器視窗大小 擷取螢幕，浏覽器，網頁高度寬度

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;

}

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;

}

function getScrollHeight()

{

    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);

}

網頁可見區域寬：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

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 

scrollHeight: 擷取對象的滾動高度。 

scrollLeft:設定或擷取位于對象左邊界和視窗中目前可見内容的最左端之間的距離 

scrollTop:設定或擷取位于對象最頂端和視窗中可見内容的最頂端之間的距離 

scrollWidth:擷取對象的滾動寬度 

offsetHeight:擷取對象相對于版面或由父坐标 offsetParent 屬性指定的父坐标的高度 

offsetLeft:擷取對象相對于版面或由 offsetParent 屬性指定的父坐标的計算左側位置 

offsetTop:擷取對象相對于版面或由 offsetTop 屬性指定的父坐标的計算頂端位置 

event.clientX 相對文檔的水準座标 

event.clientY 相對文檔的垂直座标 

event.offsetX 相對容器的水準坐标 

event.offsetY 相對容器的垂直坐标 

document.documentElement.scrollTop 垂直方向滾動的值 

event.clientX+document.documentElement.scrollTop 相對文檔的水準座标+垂直方向滾動的量IE，FireFox 差異如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5： 

clientWidth = width - borderclientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)

網頁可見區域寬： 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

－－－－－－－－－－－－－－－－－－－

技術要點

本節代碼主要使用了Document對象關于視窗的一些屬性，這些屬性的主要功能和用法如下。要得到視窗的尺寸，對于不同的浏覽器，需要使用不同的屬性和方法：若要檢測視窗的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要深入Document内部對body進行檢測；在DOM環境下，若要得到視窗的尺寸，需要注意根元素的尺寸，而不是元素。

Window對象的innerWidth屬性包含目前視窗的内部寬度。Window對象的innerHeight屬性包含目前視窗的内部高度。

Document對象的body屬性對應HTML文檔的标簽。Document對象的documentElement屬性則表示HTML文檔的根節點。

document.body.clientHeight表示HTML文檔所在視窗的目前高度。document.body. clientWidth表示HTML文檔所在視窗的目前寬度。

實作代碼：

http://www.w3.org/1999/xhtml">

請調整浏覽器視窗大小浏覽器視窗 的 實際高度: 

浏覽器視窗 的 實際寬度: 

源程式解讀（1）程式首先建立一個表單，包含兩個文本框，用于顯示視窗目前的寬度和高度，并且，其數值會随視窗大小的改變而變化。

（2）在随後的JavaScript代碼中，首先定義了兩個變量winWidth和winHeight，用于儲存視窗的高度值和寬度值。

（3）然後，在函數findDimensions ( )中，使用window.innerHeight和window.innerWidth得到視窗的高度和寬度，并将二者儲存在前述兩個變量中。

（4）再通過深入Document内部對body進行檢測，擷取視窗大小，并存儲在前述兩個變量中。

（5）在函數的最後，通過按名稱通路表單元素，結果輸出至兩個文本框。

（6）在JavaScript代碼的最後，通過調用findDimensions ( )函數，完成整個操作。

轉載于:https://www.cnblogs.com/afuge/p/3143353.html