上一节:

  jQuery 尺寸

  • jQuery 尺寸

    使用jQuery，可以轻松使用元素和浏览器窗口的尺寸。
    jQuery有几个重要的方法来处理尺寸：
    • width()
    • height()
    • innerWidth()
    • innerHeight()
    • outerWidth()
    • outerHeight()

  • jQuery 外形尺寸图

    外形尺寸图

  • jQuery width()和height()方法

    width()方法设置或返回元素的宽度（不包括填充，边框和边距）。
    height()方法设置或返回元素的高度（不包括填充，边框和边距）。
    以下示例返回指定<div>元素的宽度和高度： 
       
       <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
               $("button").click(function(){
                 var txt = "";
                 txt += "Width: " + $("#div1").width() + " </br>";
                 txt += "Height: " + $("#div1").height();
                 $("#div1").html(txt);
               });
           </script>
       </head>
    尝试一下
    以下示例返回文档（HTML文档）和窗口（浏览器视口）的宽度和高度： 
       
       <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
               $("#btn1").click(function(){
                   var txt = "";
                   txt += "文档 width/height: " + $(document).width();
                   txt += "x" + $(document).height() + "\n";
                   txt += "窗口 width/height: " + $(window).width();
                   txt += "x" + $(window).height();
                   alert(txt);
               });
               //设置div元素的宽和高的值
               $("#btn2").click(function(){
                   $("#div1").width(500).height(500);
               });
           </script>
       </head>
    尝试一下

  • jQuery innerWidth()和innerHeight()方法

    innerWidth()方法返回元素的宽度（包括填充）。
    innerHeight()方法返回元素的高度（包括填充）。
    以下示例返回指定<div>元素的内部宽度/高度： 
       
       <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
               $("button").click(function(){
                 var txt = "";
                 txt += "div 宽度，包含内边距:" + $("#div1").innerWidth() + " </br>";
                 txt += "div 高度，包含内边距:" + $("#div1").innerHeight();
                 $("#div1").html(txt);
               });
           </script>
       </head>
    尝试一下

  • jQuery outerWidth()和outerHeight()方法

    outerWidth()方法返回元素的宽度（包括填充和边框）。
    和outerHeight()方法返回元素的高度（包括填充和边框）。
    以下示例返回指定<div>元素的外部宽度/高度： 
       
       <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
               $("button").click(function(){
                 var txt = "";
                 txt += "div 宽度，包含内边距和边框：" + $("#div1").outerWidth() + " </br>";
                 txt += "div 高度，包含内边距和边框：" + $("#div1").outerHeight();
                 $("#div1").html(txt);
               }9
           </script>
       </head>
    尝试一下
    有关所有jQuery HTML方法的完整概述，请转到我们的jQuery HTML/CSS手册
上一节: