JavaScript 獲取窗口大小

提問人：劉團圓發(fā)布時間：2020-11-27

■知識點

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

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

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

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

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

var w = document.body.clientWidth;

var h = document.body.clientHeight;

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

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

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

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

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

實際寬度和高度。

■實例設(shè)計

對于document.documentElement和document.body來說，不同瀏覽器對它們的支持略有差異。

</div>

</body>

var wb = document.body.scrollWidth;

var hb = document.body.scrollHeight;

var wh = document.documentElement.scrollWidth;

var hh = document.documentElement.scrollHeight;

</script>

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

相關(guān)視頻回答

回復(fù)(0)