JavaScript 獲取窗口大小

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-27

■知識(shí)點(diǎn)

獲取<html>標(biāo)簽的clientWidth和clientHeight屬性，就可以知道瀏覽器窗口的可視寬度和高度，而<html>標(biāo)簽在腳本中表示為document.documentElement，可以這樣設(shè)計(jì)：

var w = document.documentElement.clientWidth; //返回值不包含滾動(dòng)條的寬度

var h = document.documentElement.clientHeight; //返回值不包含滾動(dòng)條的寬度

在怪異模式下，body是最頂層的可視元素，而html元素保持隱藏。所以只有通過<body>標(biāo)簽的clientWidth和clientHeight屬性才可以知道瀏覽器窗口的可視寬度和高度，而<body>標(biāo)簽在腳本中表示

為document.body，可以這樣設(shè)計(jì)：

var w = document.body.clientWidth;

var h = document.body.clientHeight;

把上面兩種方法兼容起來(lái)，則設(shè)計(jì)代碼如下:

var w = document.documentElement.clientWidth || document.body.clientWidth;

var h = document.documentElement.clientHeight || document.body.clientHeight;

如果瀏覽器支持documentElement，則使用documentElement對(duì)象讀取，如果該對(duì)象不存在，則使用body對(duì)象讀取。

如果窗口包含內(nèi)容超出了窗口可視區(qū)域，則應(yīng)該使用scrollWidtli和scrollHeight屬性來(lái)獲取窗口的

實(shí)際寬度和高度。

■實(shí)例設(shè)計(jì)

對(duì)于document.documentElement和document.body來(lái)說，不同瀏覽器對(duì)它們的支持略有差異。

</div>

</body>

var wb = document.body.scrollWidth;

var hb = document.body.scrollHeight;

var wh = document.documentElement.scrollWidth;

var hh = document.documentElement.scrollHeight;

</script>

不同瀏覽器使用documentElement對(duì)象獲取瀏覽器窗口的實(shí)際尺寸是一致的，但是使用body對(duì)象來(lái)獲取對(duì)應(yīng)尺寸時(shí)就會(huì)存在解析差異，在實(shí)際設(shè)計(jì)中應(yīng)該考慮這個(gè)問題。

相關(guān)視頻回答

回復(fù)(0)