1. 程式人生 > >Javascript、Jquery獲取瀏覽器和螢幕各種高度寬度

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