1. 程式人生 > >Javascript和JQuery獲取瀏覽器視窗各種尺寸

Javascript和JQuery獲取瀏覽器視窗各種尺寸

原生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;