javascript 獲取多種主流瀏覽器顯示頁面高度

時間 2019-11-18

標籤 javascript 獲取多種主流瀏覽器顯示頁面高度欄目 JavaScript 简体版

原文原文鏈接

IE中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
FireFox中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度

Opera中：
document.body.clientWidth ==> 可見區域寬度
document.body.clientHeight ==> 可見區域高度
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
沒有定義W3C的標準，則
IE爲：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox爲：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
Opera爲：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）javascript

網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工做區高度： window.screen.availHeight
屏幕可用工做區寬度： window.screen.availWidth
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工做區高度： window.screen.availHeight
屏幕可用工做區寬度： window.screen.availWidthjava

HTML精肯定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
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 相對文檔的水平座標+垂直方向滾動的量

實現代碼瀏覽器

 1 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3  <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5 
 6 <title>請調整瀏覽器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
 7 </meta></head>
 8 <body>
 9 <h2 align="center">請調整瀏覽器窗口大小</h2><hr />
10 <form action="#" method="get" name="form1" id="form1">
11 <!--顯示瀏覽器窗口的實際尺寸-->
12 瀏覽器窗口 的 實際高度: <input type="text" name="availHeight" size="4"/><br />
13 瀏覽器窗口 的 實際寬度: <input type="text" name="availWidth" size="4"/><br />
14 </form>
15 <script type="text/javascript">
16 <!-- 
17 var winWidth = 0;
18 var winHeight = 0;
19 function findDimensions() //函數：獲取尺寸
20 {
21 //獲取窗口寬度
22 if (window.innerWidth)
23 winWidth = window.innerWidth;
24 else if ((document.body) && (document.body.clientWidth))
25 winWidth = document.body.clientWidth;
26 //獲取窗口高度
27 if (window.innerHeight)
28 winHeight = window.innerHeight;
29 else if ((document.body) && (document.body.clientHeight))
30 winHeight = document.body.clientHeight;
31 //經過深刻Document內部對body進行檢測，獲取窗口大小
32 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
33 {
34 winHeight = document.documentElement.clientHeight;
35 winWidth = document.documentElement.clientWidth;
36 }
37 //結果輸出至兩個文本框
38 document.form1.availHeight.value= winHeight;
39 document.form1.availWidth.value= winWidth;
40 }
41 findDimensions();
42 //調用函數，獲取數值
43 window.onresize=findDimensions;
44 
45 //-->
46 </script>
47 </body>
48 </html>