关于jquery尺寸的总结

以前总是对jquery的尺寸稀里糊涂，有需要的可以看下下面的代码：

①页面布局如下：

<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <title>jquery尺寸练习</title>
   <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
   <style>
      .div1 {
         width:360px;
         height:300px;
         background:pink;
         border:2px solid #000;
         margin:10px;
         padding: 20px;
         line-height: 24px;
      }
   </style>
</head>
<body>
   <div class="div1"></div>
   <button>显示 div 元素的尺寸</button>
   <p>总结如下：</p>
   <p>width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。</p>
   <p>height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。</p>
   <p>innerWidth() 方法返回元素的宽度（包括内边距）。</p>
   <p>innerHeight() 方法返回元素的高度（包括内边距）。</p>
   <p>outerWidth() 方法返回元素的宽度（包括内边距和边框）。</p>
   <p>outerHeight() 方法返回元素的高度（包括内边距和边框）。</p>
   <p>outerHeight(true) 方法返回元素的高度（包括内边距和边框、外边距）。</p>
   <p>outerHeight(true) 方法返回元素的高度（包括内边距和边框、外边距）。</p>
</body>
</html>

②javascript代码如下：

<script>
   $(document).ready(function(){
      $("button").click(function(){
         var txt = '';
         txt+="div 宽度:"+$(".div1").width()+"<br/>";
         txt += "div 高度:"+$(".div1").height()+"<br/>";
         txt +="div 宽度，包含内边距:"+$(".div1").innerWidth()+"<br>";
         txt+="div 高度，包含内边距:"+$(".div1").innerHeight()+"<br>";
         txt +="div 宽度，包含内边距和边框:"+$(".div1").outerWidth()+"<br>";
         txt+="div 高度，包含内边距和边框:"+$(".div1").outerHeight()+"<br>";
         txt +="div 宽度，包含内边距、边框和外边距:"+$(".div1").outerWidth(true)+"<br>";
         txt+="div 高度，包含内边距、边框和外边距:"+$(".div1").outerHeight(true)+"<br>";

         $(".div1").html(txt);
      });
   });
</script>


这次将尺寸理解明白，很感谢菜鸟教程这个网站，这是一个很不错的网站，适合新手入门。我很多不懂的东西都是通过这个网站学习的。另外附上一张尺寸图，如下：

关于jquery尺寸的总结

最后，还是要多敲代码，即使是你能看懂的代码，有时候能看得懂当自己敲的时候不一定能敲出来。

关于jquery尺寸的总结

相关推荐