首頁 > 開發者 > 網站開發

JS擷取瀏覽器視窗大小 擷取螢幕，瀏覽器，網頁高度寬度

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：視窗   setw   檢測   變化   訪問   對象   xhtml 1.0   gb2312   center   

網頁可見地區寬：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> 

來源程式解讀

（1）程式首先建立一個表單，包含兩個文字框，用於顯示視窗當前的寬度和高度，並且，其數值會隨視窗大小的改變而變化。（2）在隨後的JavaScript代碼中，首先定義了兩個變數winWidth和winHeight，用於儲存視窗的高度值和寬度值。（3）然後，在函數findDimensions ( )中，使用window.innerHeight和window.innerWidth得到視窗的高度和寬度，並將二者儲存在前述兩個變數中。（4）再通過深入Document內部對body進行檢測，擷取視窗大小，並儲存在前述兩個變數中。（5）在函數的最後，通過按名稱訪問表單元素，結果輸出至兩個文字框。（6）在JavaScript代碼的最後，通過調用findDimensions ( )函數，完成整個操作。

JS擷取瀏覽器視窗大小 擷取螢幕，瀏覽器，網頁高度寬度

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More