Javascript、Jquery獲取瀏覽器和屏幕各種高度寬度


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高)

 

 

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

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

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

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

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

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

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

 

 1 <!DOCTYPE html>
 2 <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
 3 <html>
 4   <head>
 5     <title>aaa</title>
 6   </head>
 7   <body>
 8 <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 9 aaaaaaaaaaaaaaaaaa</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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM