JavaScript獲取網(wǎng)頁、瀏覽器、屏幕高度和寬度匯總
經(jīng)常發(fā)現(xiàn)在寫JavaScript的時(shí)候，都需要用到網(wǎng)頁、瀏覽器或屏幕的高度和寬度來解決布局定位的問題，時(shí)常前用后忘，要不就是在網(wǎng)上search，干脆自己總結(jié)一下，這樣也方便再次使用，省時(shí)省力。
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.clientWidth
網(wǎng)頁可見區(qū)域高：document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬)
網(wǎng)頁正文全文寬：document.body.scrollWidth （帶滾動(dòng)條寬）
網(wǎng)頁正文全文高：document.body.scrollHeight （帶滾動(dòng)條高）
網(wǎng)頁被卷去的高：document.body.scrollTop
網(wǎng)頁被卷去的左：document.body.scrollLeft
網(wǎng)頁正文部分上：window.screenTop
網(wǎng)頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區(qū)高度：window.screen.availHeight
屏幕可用工作區(qū)寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對(duì)象的滾動(dòng)高度。
scrollLeft:設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop:設(shè)置或獲取位于對(duì)象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
scrollWidth:獲取對(duì)象的滾動(dòng)寬度
offsetHeight:獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度
offsetLeft:獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置
offsetTop:獲取對(duì)象相對(duì)于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置
event.clientX 相對(duì)文檔的水平座標(biāo)
event.clientY 相對(duì)文檔的垂直座標(biāo)
event.offsetX 相對(duì)容器的水平坐標(biāo)
event.offsetY 相對(duì)容器的垂直坐標(biāo)
document.documentElement.scrollTop 垂直方向滾動(dòng)的值
event.clientX+document.documentElement.scrollTop 相對(duì)文檔的水平座標(biāo)+垂直方向滾動(dòng)的量
IE，F(xiàn)ireFox 差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
總結(jié)：關(guān)于高度和寬度的東西到是挺多的，具體的有些自己也沒有弄懂，通過自己試驗(yàn)了一下，有些得出的值是一樣，所以很讓人迷惑，只能視情況而定了。
相關(guān)文章
這篇文章主要介紹了微信小程序中的生命周期與生命周期函數(shù)的介紹，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要為大家介紹了JavaScript?BOM對(duì)象，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-12-12
本文主要分享了js實(shí)現(xiàn)無縫滾動(dòng)圖的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
下面小編就為大家?guī)硪黄獪\談JS原生Ajax,GET和POST。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
JavaScript中的toString()和toLocaleString()方法的區(qū)別
本文給大家介紹JavaScript中的toString()和toLocaleString()方法的區(qū)別,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
Js遍歷鍵值對(duì)形式對(duì)象或Map形式的方法
下面小編就為大家?guī)硪黄狫s遍歷鍵值對(duì)形式對(duì)象或Map形式的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
js通過googleAIP翻譯PHP系統(tǒng)的語言配置的實(shí)現(xiàn)代碼
一同事弄了個(gè)系統(tǒng)是php寫的，雖然是多語言但沒中文！他打算手動(dòng)翻譯2000多個(gè)語言配置，真是佩服，知道后想了想，應(yīng)該有好的法辦2011-10-10
這篇文章主要介紹了JS判斷字符串包含的方法,可有效的檢測(cè)字符串中是否包含固定字符或子字符串,涉及javascript中indexOf的使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
$符號(hào)在php中是表示變量的特征字符， 在js中它也有很多作用， 一般我們用來命名一個(gè)函數(shù)名稱，獲取id的2008-06-06
閉包是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分，本文將用通俗的語言帶您深入理解Javascript閉包的概念。2011-09-09