Javascript和JQuery獲取瀏覽器視窗各種尺寸
阿新 • • 發佈:2018-12-12
原生JS 視窗尺寸: console.log('window.innerWidth = ' + window.innerWidth + '---window.innerHeight = ' + window.innerHeight) console.log('document.body.clientWidth = ' + document.body.clientWidth + '---document.body.clientHeight = ' + document.body.clientHeight) JQuery 視窗尺寸: console.log($(window).height()); //瀏覽器時下視窗可視區域高度 console.log($(document).height()); //瀏覽器時下視窗文件的高度 console.log($(document.body).height());//瀏覽器時下視窗文件body的高度 console.log($(document.body).outerHeight(true));//瀏覽器時下視窗文件body的總高度 包括border padding margin console.log($(window).width()); //瀏覽器時下視窗可視區域寬度 console.log($(document).width());//瀏覽器時下視窗文件對於象寬度 console.log($(document.body).width());//瀏覽器時下視窗文件body的高度 console.log($(document.body).outerWidth(true));//瀏覽器時下視窗文件body的總寬度 包括border padding margin console.log($(document).scrollTop()); //獲取滾動條到頂部的垂直高度 console.log($(document).scrollLeft()); //獲取滾動條到左邊的垂直寬度
附頁面載入後自動設定div高度:
//頁面程式碼 <body> <div id="div1" class="clear" style="margin: 0px auto;clear: both;"> 您的頁面內容。 </div> </body> //JS程式碼 var winHeight = 0; function findDimensions() //函式:獲取尺寸 { //獲取視窗高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通過深入Document內部對body進行檢測,獲取視窗大小 if (document.documentElement && document.documentElement.clientHeight) { winHeight = document.documentElement.clientHeight; } document.getElementById("div1").style.height= winHeight+"px"; } findDimensions(); //呼叫函式,獲取數值 window.onresize=findDimensions;