JS獲取瀏覽器視窗大小 獲取螢幕，瀏覽器，網頁高度寬度（轉載）
阿新 • • 發佈：2018-12-21
網頁可見區域寬：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 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 相對文件的水平座標+垂直方向滾動的量 IE，FireFox 差異如下： 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 (需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關) 網頁可見區域寬： 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物件關於視窗的一些屬性，這些屬性的主要功能和用法如下。 要得到視窗的尺寸，對於不同的瀏覽器，需要使用不同的屬性和方法：若要檢測視窗的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要 深入Document內部對body進行檢測；在DOM環境下，若要得到視窗的尺寸，需要注意根元素的尺寸，而不是元素。 Window物件的innerWidth屬性包含當前視窗的內部寬度。Window物件的innerHeight屬性包含當前視窗的內部高度。 Document物件的body屬性對應HTML文件的標籤。Document物件的documentElement屬性則表示HTML文件的根節點。 document.body.clientHeight表示HTML文件所在視窗的當前高度。document.body. clientWidth表示HTML文件所在視窗的當前寬度。 實現程式碼 <!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>請調整瀏覽器視窗</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> </head> <body> <h2 align="center">請調整瀏覽器視窗大小</h2><hr> <form action="#" method="get" name="form1" id="form1"> <!--顯示瀏覽器視窗的實際尺寸--> 瀏覽器視窗 的 實際高度: <input type="text" name="availHeight" size="4"><br> 瀏覽器視窗 的 實際寬度: <input type="text" name="availWidth" size="4"><br> </form> <script type="text/javascript"> <!-- var winWidth = 0; var winHeight = 0; function findDimensions() //函式：獲取尺寸 { //獲取視窗寬度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //獲取視窗高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通過深入Document內部對body進行檢測，獲取視窗大小 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } //結果輸出至兩個文字框 document.form1.availHeight.value= winHeight; document.form1.availWidth.value= winWidth; } findDimensions(); //呼叫函式，獲取數值 window.onresize=findDimensions; //--> </script> </body> </html>