jQuery获取浏览器窗口的宽度和高度

来源：互联网发布：三星手机mac地址查询编辑：程序博客网时间：2024/04/29 22:23

<!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 runat="server">
    <title>左中右版式</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../jquery/jquery-1.7.2.js"></script>
    <script type="text/javascript">
       $(document).ready(function() {
           //alert("wgewgweg");
               $("#result").html($("#result").html() +"浏览器时下窗口可视区域高度 : " + $(window).height() + "<br />");
               //浏览器时下窗口可视区域高度 267
               $("#result").html($("#result").html() +"浏览器时下窗口文档的高度 : " + $(document).height() + "<br />");
               //浏览器时下窗口文档的高度 267
               $("#result").html($("#result").html() +"浏览器时下窗口文档body的高度 : " + $(document.body).height() + "<br />");
               //浏览器时下窗口文档body的高度 20 其结果和body的内容有关，无内容时为0
               $("#result").html($("#result").html() +"浏览器时下窗口文档body的总高度包括border padding margin : " + $(document.body).outerHeight(true) + "<br />");

               $("#result").html($("#result").html() +   "<br />");
               $("#result").html($("#result").html() +   "<br />");
               //浏览器时下窗口文档body的总高度包括border padding margin   36 其结果和body的内容有关，无内容时为16
               $("#result").html($("#result").html() +"浏览器时下窗口可视区域宽度 : " + $(window).width()+ "<br />");
               //浏览器时下窗口可视区域宽度 1366
               $("#result").html($("#result").html() +"浏览器时下窗口文档对于象宽度 : " + $(document).width() + "<br />");
               //浏览器时下窗口文档对于象宽度 1366
               $("#result").html($("#result").html() +"浏览器时下窗口文档body的宽度 : " + $(document.body).width() + "<br />");
               //浏览器时下窗口文档body的高度 1350 好像与有没有内容无关，与边界相关
               $("#result").html($("#result").html() +"浏览器时下窗口文档body的总宽度包括border padding margin : " + $(document.body).outerWidth(true) + "<br />");

       });
   </script>

    <style type="text/css">

   </style>
</head>
<body style="border:solid 5px #f00;">
   <h1>$(window).height(); 获取的值与窗口实际大小有关，可以用于布局</h1>
    <h1>我的测试UI</h1>
    <h1>我的测试UI</h1>
    <h1>我的测试UI</h1>
   <div id="result"></div>
</body>
</html>

0 0