JavaScript 獲取窗口大小
■知識(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)題。
點(diǎn)擊加載更多評(píng)論>>