有三種方法可以肯定瀏覽器窗口的尺寸(瀏覽器的視口,不包括工具欄和滾動條)。javascript
瀏覽器窗口的內部高度:window.innerHeight
瀏覽器窗口的內部寬度:window.innerWidthjava
document.documentElement.clientHeight
document.documentElement.clientWidthjquery
document.body.clientHeight
document.body.clientWidthchrome
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); //屏幕可用工做區的寬
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
scrollHeight 獲取對象的滾動高度。
scrollLeft 設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop 設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth 獲取對象的滾動寬度
offsetHeight 獲取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度
offsetLeft 獲取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置
offsetTop 獲取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平座標
event.offsetY 相對容器的垂直座標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量瀏覽器