位置：首頁(yè) > 軟件操作教程 > 編程開發(fā) > JavaScript > 問(wèn)題詳情

JavaScript 獲取窗口大小

提問(wèn)人：劉團(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元素保持隱藏。所以只有通過(guò)<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)說(shuō)，不同瀏覽器對(duì)它們的支持略有差異。

<body style="border:solid 2px blue;margin:0;padding:0">

    <div style="width:2000px;height:1000px;border:solid lpx red;">

    </div>

</body>

<script>

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è)問(wèn)題。

繼續(xù)查找其他問(wèn)題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部