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手册