前端開(kāi)發(fā)中經(jīng)常需要獲取頁(yè)面還有屏幕的高度和寬度進(jìn)行計(jì)算,此文即介紹如何用 JavaScript 還有 jQuery 獲取這些尺寸.

1.簡(jiǎn)介

一個(gè)頁(yè)面顯示在瀏覽器內(nèi),瀏覽器又放置在屏幕窗口內(nèi),所以由里向外便是 頁(yè)面 , 瀏覽器 , 屏幕 三者.
展示圖:

2.屏幕尺寸

• screen.availHeight:屏幕可用高度
• screen.availWidth:屏幕可用寬度
• screen.Height:屏幕高度
• screen.Width:屏幕寬度

3.瀏覽器尺寸

- window.outerHeight:瀏覽器高度 , 此高度包含了水平滾動(dòng)條的高度(若存在)。
- window.outerWidth:瀏覽器寬度
- window.innerHeight:頁(yè)面可用高度
- window.innerWidth:頁(yè)面可用寬度
- window.outerHeight - window.innerHeight:工具欄高度

4.頁(yè)面尺寸

- body.clientHeight:網(wǎng)頁(yè)可見(jiàn)區(qū)域高度
- body.clientWidth:網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挾?
- body.offsetHeight:網(wǎng)頁(yè)可見(jiàn)區(qū)域高度(包括邊線的高)
- body.offsetWidth:網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挾?包括邊線的寬)
- window.innerHeight - body.clientHeight:滾動(dòng)條高度

5. jQuery 獲取各種寬度和高度

瀏覽器可視區(qū)域

$(window).height()
$(window).width()

頁(yè)面的文檔尺寸

$(document).height()
$(document).width()

當(dāng)前窗口文檔body的尺寸

$(document.body).height()
$(document.body).width()

滾動(dòng)條到頂部的垂直高度 (即網(wǎng)頁(yè)被卷上去的高度)

$(document).scrollTop()
$(document).scrollLeft()

Reference
我們都是從菜鳥(niǎo)開(kāi)始的blog
jQuery的各種寬度和高度