瀏覽器可視區大小簡說(clientWidth,innerWidth)
阿新 • • 發佈:2018-05-26
ner ber eight style else alert height inner 寬度
網絡上獲取窗口文檔顯示區的寬高有以下三種方式:
1:window.innerHeight/innerWidth
第一種方式獲取的是可視區的寬高,包括了滾動條的寬度
ps:IE 8 及更早 IE版本不支持這兩個屬性。
2:document.body.clientHeight/clientWidth
第二種方式獲取的是 body對象寬度
3:document.documentElement.clientHeight/clientWidth
第三種方式獲取的是可視區的寬高,不包括了滾動條的寬度
兼容寫法如下var width = window.innerWidth,
height = window.innerHeight;if (typeof width != ‘number‘) { //如果類型不為number,表示該瀏覽器不支持innerWidth屬性 if (document.compatMode == ‘CSS1Compat‘) { //CSS1Compat:判斷是否為標準兼容模式。 width = document.documentElement.clientWidth; height = document.docuementElement.clientHeight; } else { //不是標準模式,則有可能是IE6或及其以下版本(早期的瀏覽器對css進行解析時,並未遵守W3C標準)width = document.body.clientWidth; //網頁可見區域寬 height = document.body.clientHeight; //網頁可見區域高 } alert(width); alert(height);
瀏覽器可視區大小簡說(clientWidth,innerWidth)