javascript獲取網(wǎng)頁寬高方法匯總
document.body.clientWidth - 網(wǎng)頁可見區(qū)域?qū)?br /> document.body.clientHeight - 網(wǎng)頁可見區(qū)域高
document.body.offsetWidth - 網(wǎng)頁可見區(qū)域?qū)?,包括邊線和滾動條的寬
document.body.offsetHeight - 網(wǎng)頁可見區(qū)域高,包括邊線和滾動條的高[FF,chrom下是整個頁面高,IE opera 下正常]
document.body.scrollWidth - 網(wǎng)頁總寬
document.body.scrollHeight - 網(wǎng)頁總高
document.body.scrollTop - 有滾動條的時候,向下拖動滾動條,上方不顯示的那部分高度
document.body.scrollLeft - 同上
window.innerHeight - 瀏覽器窗口的內(nèi)部高度
window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
window.screenTop - 網(wǎng)頁正文部分上[網(wǎng)頁文檔的最上方距離屏幕最上方的距離,但FF不支持,Chrom,IE,Opera表現(xiàn)都不同,慎用]
window.screenLeft - 網(wǎng)頁正文部分左[網(wǎng)頁文檔的最左方距離屏幕最左方的距離,但FF不支持,Chrom,IE,Opera表現(xiàn)都不同,慎用]
window.screen.height - 屏幕分辨率的高度
window.screen.width - 屏幕分辨率的寬度
window.screen.availHeight - 可用工作區(qū)高度[整個屏幕但不包括下方任務欄]
window.screen.availWidth - 可用工作區(qū)寬度[整個屏幕的寬度]
window.screen.clorDepth - 屏幕色彩,常用的16,32位等
window.screen.deviceXDPI - 屏幕像素/英寸【IE支持,其它不支持】
JavaScript 獲取頁面寬高的方法
<script>
function getInfo()
{
var s = "";
s += " 網(wǎng)頁可見區(qū)域?qū)挘?+ document.body.clientWidth;
s += " 網(wǎng)頁可見區(qū)域高:"+ document.body.clientHeight;
s += " 網(wǎng)頁可見區(qū)域?qū)挘?+ document.body.offsetWidth + " (包括邊線和滾動條的寬)";
s += " 網(wǎng)頁可見區(qū)域高:"+ document.body.offsetHeight + " (包括邊線的寬)";
s += " 網(wǎng)頁正文全文寬:"+ document.body.scrollWidth;
s += " 網(wǎng)頁正文全文高:"+ document.body.scrollHeight;
s += " 網(wǎng)頁被卷去的高(ff):"+ document.body.scrollTop;
s += " 網(wǎng)頁被卷去的高(ie):"+ document.documentElement.scrollTop;
s += " 網(wǎng)頁被卷去的左:"+ document.body.scrollLeft;
s += " 網(wǎng)頁正文部分上:"+ window.screenTop;
s += " 網(wǎng)頁正文部分左:"+ window.screenLeft;
s += " 屏幕分辨率的高:"+ window.screen.height;
s += " 屏幕分辨率的寬:"+ window.screen.width;
s += " 屏幕可用工作區(qū)高度:"+ window.screen.availHeight;
s += " 屏幕可用工作區(qū)寬度:"+ window.screen.availWidth;
s += " 你的屏幕設置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕設置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地測試當中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth document.body.clientHeight
即可獲得,很簡單,很方便。
而在公司項目當中:
Opera仍然使用
document.body.clientWidth document.body.clientHeight
可是IE和FireFox則使用
document.documentElement.clientWidth document.documentElement.clientHeight
原來是W3C的標準在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 如果在頁面中添加這行標記的話
在IE中:
document.body.clientWidth ==> BODY對象寬度 document.body.clientHeight ==> BODY對象高度 document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾? document.documentElement.clientHeight ==> 可見區(qū)域高度
在FireFox中:
document.body.clientWidth ==> BODY對象寬度 document.body.clientHeight ==> BODY對象高度 document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾? document.documentElement.clientHeight ==> 可見區(qū)域高度
在Opera中:
document.body.clientWidth ==> 可見區(qū)域?qū)挾? document.body.clientHeight ==> 可見區(qū)域高度 document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬) document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)
而如果沒有定義W3C的標準,則
IE為:
document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0
FireFox為:
document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)
Opera為:
document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- javascript實現(xiàn)網(wǎng)頁中涉及的簡易運動(改變寬高、透明度、位置)
- JS獲取屏幕,瀏覽器窗口大小,網(wǎng)頁高度寬度(實現(xiàn)代碼)
- javascript獲取和判斷瀏覽器窗口、屏幕、網(wǎng)頁的高度、寬度等
- 獲取JS中網(wǎng)頁各種高寬與位置的方法總結(jié)
- JavaScript獲取網(wǎng)頁、瀏覽器、屏幕高度和寬度匯總
- javascript獲取網(wǎng)頁各種高寬及位置的方法總結(jié)
- JS獲取網(wǎng)頁屬性包括寬、高等等
- jQuery javascript獲得網(wǎng)頁的高度與寬度的實現(xiàn)代碼
- JavaScript獲取網(wǎng)頁的寬高及如何兼容詳解
相關文章
小程序使用webview內(nèi)嵌h5頁面 wx.miniProgram.getEnv失效問題
本文主要介紹了小程序使用webview內(nèi)嵌h5頁面 wx.miniProgram.getEnv失效問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
Input 特殊事件onpopertychange和oninput
onpopertychange和oninput的區(qū)別。2009-06-06

