當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

js 如何获取浏览器的高度和宽度

發(fā)布時(shí)間：2024/3/13 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 js 如何获取浏览器的高度和宽度小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

IE中：

document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見(jiàn)區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見(jiàn)區(qū)域高度

FireFox中：

沒(méi)有定義W3C的標(biāo)準(zhǔn)，則

IE為：

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox為：

document.documentElement.clientWidth ==> 頁(yè)面對(duì)象寬度（即BODY對(duì)象寬度加上Margin寬)
document.documentElement.clientHeight ==> 頁(yè)面對(duì)象高度（即BODY對(duì)象高度加上Margin高）

網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?#xff1a; document.body.clientWidth
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)?#xff1a; document.body.offsetWidth (包括邊線(xiàn)的寬)
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線(xiàn)的高)
網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth
網(wǎng)頁(yè)正文全文高： document.body.scrollHeight
網(wǎng)頁(yè)被卷去的高： document.body.scrollTop
網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft
網(wǎng)頁(yè)正文部分上： window.screenTop
網(wǎng)頁(yè)正文部分左： 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ì)象左邊界和窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離
scrollTop:設(shè)置或獲取位于對(duì)象最頂端和窗口中可見(jiàn)內(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)的量

參考代碼

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>請(qǐng)調(diào)整瀏覽器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> </meta></head> <body> <h2 align="center">請(qǐng)調(diào)整瀏覽器窗口大小</h2><hr /> <form action="#" method="get" name="form1" id="form1">  瀏覽器窗口的實(shí)際高度: <input type="text" name="availHeight" size="4"/><br /> 瀏覽器窗口的實(shí)際寬度: <input type="text" name="availWidth" size="4"/><br /> </form> <script type="text/javascript">  </script> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的js 如何获取浏览器的高度和宽度的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：手把手教你如何将chatgpt接入微信公
下一篇：常见品牌的手机型号所代表的含义