Javascript、Jquery獲取瀏覽器和螢幕各種高度寬度
Javascript:
IE中:
document.body.clientWidth ==> BODY物件寬度
document.body.clientHeight ==> BODY物件高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
FireFox中:
document.body.clientWidth ==> BODY物件寬度
document.body.clientHeight ==> BODY物件高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
Opera中:
document.body.clientWidth ==> 可見區域寬度
document.body.clientHeight ==> 可見區域高度
document.documentElement.clientWidth ==> 頁面物件寬度(即BODY物件寬度加上Margin寬)
document.documentElement.clientHeight ==> 頁面物件高度(即BODY物件高度加上Margin高)
alert(document.body.clientWidth); //網頁可見區域寬(body)
alert(document.body.clientHeight); //網頁可見區域高(body)
alert(document.body.offsetWidth); //網頁可見區域寬(body),包括border、margin等
alert(document.body.offsetHeight); //網頁可見區域寬(body),包括border、margin等
alert(document.body.scrollWidth); //網頁正文全文寬,包括有滾動條時的未見區域
alert(document.body.scrollHeight); //網頁正文全文高,包括有滾動條時的未見區域
alert(document.body.scrollTop); //網頁被捲去的Top(滾動條)
alert(document.body.scrollLeft); //網頁被捲去的Left(滾動條)
alert(window.screenTop); //瀏覽器距離Top
alert(window.screenLeft); //瀏覽器距離Left
alert(window.screen.height); //螢幕解析度的高
alert(window.screen.width); //螢幕解析度的寬
alert(window.screen.availHeight); //螢幕可用工作區的高
alert(window.screen.availWidth); //螢幕可用工作區的寬
Jquery
alert($(window).height()); //瀏覽器當前視窗可視區域高度
alert($(document).height()); //瀏覽器當前視窗文件的高度
alert($(document.body).height()); //瀏覽器當前視窗文件body的高度
alert($(document.body).outerHeight(true)); //瀏覽器當前視窗文件body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器當前視窗可視區域寬度
alert($(document).width()); //瀏覽器當前視窗文件物件寬度
alert($(document.body).width()); //瀏覽器當前視窗文件body的寬度
alert($(document.body).outerWidth(true)); //瀏覽器當前視窗文件body的總寬度 包括border padding margin