Javascript擷取各種瀏覽器可見視窗大小

最後更新：2018-12-07 來源：互聯網

上載者：User

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

網頁可見地區寬： 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.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.availWidthHTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 擷取對象的滾動高度。 scrollLeft:設定或擷取位於對象左邊界和視窗中目前可見內容的最左端之間的距離 scrollTop:設定或擷取位於對象最頂端和視窗中可見內容的最頂端之間的距離 scrollWidth:擷取對象的滾動寬度 offsetHeight:擷取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度 offsetLeft:擷取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置 offsetTop:擷取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置 event.clientX 相對文檔的水平座標 (不包括捲軸的x)event.clientY 相對文檔的垂直座標 （不包括捲軸的y）event.offsetX 相對容器的水平座標 event.offsetY 相對容器的垂直座標 document.documentElement.scrollTop 垂直方向滾動的值 event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
Event.clientX/Event.clientY：事件發生的時候，滑鼠相對於瀏覽器視窗可視文檔地區的左上方的位置；
(在DOM標準中，這兩個屬性值都不考慮文檔的滾動 情況，也就是說，無論文檔滾動到哪裡，只要事件發生在視窗左上方，
clientX和clientY都是 0，所以在IE中，要想得到事件發生的座標相對於文檔開頭的位置，
要加上document.body.scrollLeft和 document.body.scrollTop).even.keyCode：返回keydown何keyup事件發生的時候按鍵的代碼，以及keypress 事件的Unicode字元；
(firefox2不支援 event.keycode，可以用 event.which替代 )

例子

IE6/7/8：對於沒有doctype聲明的頁面裡可以使用  document.body.scrollTop 來擷取 scrollTop高度 ；對於有doctype聲明的頁面則可以使用 document.documentElement.scrollTop  ；Safari：safari 比較特別，有自己擷取scrollTop的函數 ： window.pageYOffset ；Firefox：Firefox等等相對標準些的瀏覽器就省心多了，直接用 document.documentElement.scrollTop ；var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

有w3c標準（在頁面中添加這行標記的話）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">在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 ==> 0document.documentElement.clientHeight ==> 0FireFox為：document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）Opera為：document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）

判斷瀏覽器的類型：var ua = navigator.userAgent.toLowerCase ();var os = new Object();os.isFirefox = ua.indexOf ("gecko") != -1;os.isOpera = ua.indexOf ("opera") != -1;os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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