簡明現(xiàn)代魔法 -> JavaScript -> JavaScript 獲取瀏覽器窗口的大小

JavaScript 獲取瀏覽器窗口的大小

2010-04-16

程序演示：

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

瀏覽器窗口的實際寬度:

瀏覽器窗口的實際高度:

程序主要使用了Document對象關(guān)于窗口的一些屬性，這些屬性的主要功能和用法如下：

要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要深入Document內(nèi)部對body進(jìn)行檢測；在DOM環(huán)境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是

元素。

Window對象的innerWidth屬性包含當(dāng)前窗口的內(nèi)部寬度。Window對象的innerHeight屬性包含當(dāng)前窗口的內(nèi)部高度。

Document對象的body屬性對應(yīng)HTML文檔的

標(biāo)簽。Document對象的documentElement屬性則表示 HTML文檔的根節(jié)點。

document.body.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。document.body. clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。

JavaScript Code

var winWidth = 0;

var winHeight = 0;

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

{

// 獲取窗口寬度

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內(nèi)部對body進(jìn)行檢測，獲取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

// 結(jié)果輸出至兩個文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions(); // 調(diào)用函數(shù)，獲取數(shù)值

window.οnresize=findDimensions;

程序?qū)崿F(xiàn)步驟：

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

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。