客户区大小 clientWidth & clientHeight

加入了浏览器判断

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title>111</title>
 6     <style type="text/css">
 7     body{
 8         margin: 0;
 9         padding: 0;
10     }
11     </style>
12 </head>
13 <body>
14     <div id="out1" style="width:200px;height:100px;overflow:scroll; margin:88px;">
15         <div style="background:#666666;height:150px;"></div>
16     </div>
17     <script type="text/javascript" src="test13.js"></script>
18 </body>
19 </html>
 1 function getViewport() {
 2     if (document.compatMode == "BackCompat") {
 3         return {
 4             width: document.body.clientWidth,
 5             height: document.body.clientHeight
 6         };
 7     } else {
 8         return {
 9             width: document.documentElement.clientWidth,
10             height: document.documentElement.clientHeight
11         };
12     }
13 }
14 console.log(getViewport().width);
15 console.log(getViewport().height);
posted @ 2012-05-16 21:23  小猩猩君  阅读(266)  评论(0)  编辑  收藏  举报