JS、JQUERY 獲取瀏覽器和屏幕各類高度寬度 JS 獲取瀏覽器窗口大小

時間 2019-12-05

標籤 jquery 獲取瀏覽器屏幕各類高度寬度窗口大小欄目 JavaScript 简体版

原文原文鏈接

好長時間沒有更新博客了。。。javascript

把我最近積累的一點知識點放上博客，之後以備不需之要，也給你們整理一下。。html

Javascript:java

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高）jquery

alert(document.body.clientWidth); //網頁可見區域寬(body)瀏覽器

alert(document.body.clientHeight); //網頁可見區域高(body)post

alert(document.body.offsetWidth); //網頁可見區域寬(body)，包括border、margin等測試

alert(document.body.offsetHeight); //網頁可見區域寬(body)，包括border、margin等url

alert(document.body.scrollWidth); //網頁正文全文寬，包括有滾動條時的未見區域spa

alert(document.body.scrollHeight); //網頁正文全文高，包括有滾動條時的未見區域3d

alert(document.body.scrollTop); //網頁被捲去的Top(滾動條)

alert(document.body.scrollLeft); //網頁被捲去的Left(滾動條)

alert(window.screenTop); //瀏覽器距離Top

alert(window.screenLeft); //瀏覽器距離Left

alert(window.screen.height); //屏幕分辨率的高

alert(window.screen.width); //屏幕分辨率的寬

alert(window.screen.availHeight); //屏幕可用工做區的高

alert(window.screen.availWidth); //屏幕可用工做區的寬

Jquery

alert($(window).height()); //瀏覽器當前窗口可視區域高度

alert($(document).height()); //瀏覽器當前窗口文檔的高度

alert($(document.body).height()); //瀏覽器當前窗口文檔body的高度

alert($(document.body).outerHeight(true)); //瀏覽器當前窗口文檔body的總高度包括border padding margin

alert($(window).width()); //瀏覽器當前窗口可視區域寬度

alert($(document).width()); //瀏覽器當前窗口文檔對象寬度

alert($(document.body).width()); //瀏覽器當前窗口文檔body的寬度

alert($(document.body).outerWidth(true)); //瀏覽器當前窗口文檔body的總寬度包括border padding margin

JS 獲取瀏覽器窗口大小

經常使用:

JS 獲取瀏覽器窗口大小

 
           // 獲取窗口寬度 
          
           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; 
          
           }

詳細:

關於獲取各類瀏覽器可見窗口大小:
<script>
function getInfo()
{
var s = "";
s = " 網頁可見區域寬：" document.body.clientWidth;
s = " 網頁可見區域高：" document.body.clientHeight;
s = " 網頁可見區域寬：" document.body.offsetWidth " (包括邊線和滾動條的寬)";
s = " 網頁可見區域高：" document.body.offsetHeight " (包括邊線的寬)";
s = " 網頁正文全文寬：" document.body.scrollWidth;
s = " 網頁正文全文高：" document.body.scrollHeight;
s = " 網頁被捲去的高(ff)：" document.body.scrollTop;
s = " 網頁被捲去的高(ie)：" document.documentElement.scrollTop;
s = " 網頁被捲去的左：" document.body.scrollLeft;
s = " 網頁正文部分上：" window.screenTop;
s = " 網頁正文部分左：" window.screenLeft;
s = " 屏幕分辨率的高：" window.screen.height;
s = " 屏幕分辨率的寬：" window.screen.width;
s = " 屏幕可用工做區高度：" window.screen.availHeight;
s = " 屏幕可用工做區寬度：" window.screen.availWidth;

s = " 你的屏幕設置是 " window.screen.colorDepth " 位彩色";
s = " 你的屏幕設置 " window.screen.deviceXDPI " 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地測試當中：
在IE、FireFox、Opera下均可以使用
document.body.clientWidth
document.body.clientHeight
便可得到，很簡單，很方便。
而在公司項目當中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
但是IE和FireFox則使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原來是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 ==> 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高）

 1 <!DOCTYPE html>
 2 <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
 3 <html>
 4   <head>
 5     <title>aaa</title>
 6   </head>
 7   <body>
 8 <h1>aaaaaaaaaaaa</h1>
10     <p>Welcome to aaa</p>
11 <h1>aaa</h1>
12 <h1>aaa</h1>
13 <h1>aaa</h1>
14 <h1>aaa</h1>
15 <h1>aaa</h1>
16 <h1>aaa</h1>
17 <h1>aaa</h1>
18 <h1>aaa</h1>
19 <h1>aaa</h1>
20 <h1>aaa</h1>
21 <h1>aaa</h1>
22 <h1>aaa</h1>
23 <h1>aaa</h1>
24   </body>
25 </html>
26 
27 <script type="text/javascript">
28 alert(document.body.clientWidth);
29 alert(document.body.clientHeight);
30 alert(document.body.offsetWidth);
31 alert(document.body.offsetHeight);
32 
33 alert(document.body.scrollWidth);
34 alert(document.body.scrollHeight);
35 
36 alert(document.body.scrollTop);
37 alert(document.body.scrollLeft);
38 alert(window.screenTop);
39 alert(window.screenLeft);
40 alert(window.screen.height);
41 alert(window.screen.width);
42 alert(window.screen.availHeight);
43 alert(window.screen.availWidth);
44 
45 //alert($(document).height()); 
46 //alert($(document).width());
47 </script>