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)文章
JavaScript中的toString()和toLocaleString()方法的區(qū)別
本文給大家介紹JavaScript中的toString()和toLocaleString()方法的區(qū)別,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02Js遍歷鍵值對(duì)形式對(duì)象或Map形式的方法
下面小編就為大家?guī)硪黄狫s遍歷鍵值對(duì)形式對(duì)象或Map形式的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08js通過googleAIP翻譯PHP系統(tǒng)的語言配置的實(shí)現(xiàn)代碼
一同事弄了個(gè)系統(tǒng)是php寫的,雖然是多語言但沒中文!他打算手動(dòng)翻譯2000多個(gè)語言配置,真是佩服,知道后想了想,應(yīng)該有好的法辦2011-10-10