簡明現代魔法 -> JavaScript -> JavaScript 獲取瀏覽器窗口的大小

JavaScript 獲取瀏覽器窗口的大小

2010-04-16

程序演示：

獲取瀏覽器當前窗口大小。當瀏覽器窗口大小變化時，顯示的值會隨時變化。

瀏覽器窗口的實際寬度:

瀏覽器窗口的實際高度:

程序主要使用了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文檔所在窗口的當前寬度。

JavaScript Code

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函數：獲取尺寸

{

// 獲取窗口寬度

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;

}

// 結果輸出至兩個文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions(); // 調用函數，獲取數值

window.οnresize=findDimensions;

程序實現步驟：

程序首先建立一個表單，包含兩個文本框，用于顯示窗口當前的寬度和高度，并且，其數值會隨窗口大小的改變而變化。

在隨后的JavaScript代碼中，首先定義了兩個變量winWidth和winHeight，用于保存窗口的高度值和寬度值。

然后，在函數findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個變量中。

再通過深入Document內部對body進行檢測，獲取窗口大小，并存儲在前述兩個變量中。

在函數的最后，通過按名稱訪問表單元素，結果輸出至兩個文本框。

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

總結

以上是生活随笔為你收集整理的html中获取浏览器窗口宽度,JavaScript 获取浏览器窗口的大小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。