以前总是对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尺寸的总结的更多相关文章
	

    
						
  1. 实现文字自动横移--- jquery尺寸相关函数
		
    效果图: 一实现文字自动横移 <style type="text/css"> #demo {overflow:scroll;width:740px; } #indemo ...
    
		
    2. 
						
  2. jQuery 基础(4)jQuery 尺寸
		
    jQuery 尺寸方法jQuery 提供多个处理尺寸的重要方法:width()height()innerWidth()innerHeight()outerWidth()outerHeight()jQu ...
    
		
    3. 
						
  3. jQuery  尺寸
		
    通过 jQuery,很容易处理元素和浏览器窗口的尺寸. jQuery 尺寸 方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHe ...
    
		
    4. 
								
  4. jquery尺寸和jQuery设置和获取内容方法
		
    一.jquery尺寸 jQuery 提供多个处理尺寸的重要方法: width()    设置或返回元素的宽度(不包括内边距.边框或外边距),括号中可填数值宽度参数,无单位 height()   设置或 ...
    
		
    5. 
						
  5. jQuery尺寸
		
    jQuery 尺寸 jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包 ...
    
		
    6. 
						
  6. jQuery尺寸算法
		
    我们默认都统一是采用offsetWidth或者offsetHeight取值了,但我们知道关于这2个尺寸的算法是这样的: offsetWidth = border-left-width + paddin ...
    
		
    7. 
						
  7. 图解JQUERY尺寸及位置定义
		
    最近在学习JQUERY的一些应用,接触到了JQUERY对于元素尺寸及位置定义,还有就是配合浏览器尺 寸及状态的计算所做出的一些动画特效.其实像这类JQUERY应用无外乎涉及这些属性的调用:innerH ...
    
		
    8. 
						
  8. jQuery 尺寸 方法
		
    jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHeight()
    
		
    9. 
						
  9. jquery——尺寸
		
    1. 获取和设置元素的尺寸 2. 获取元素相对页面的绝对位置:offset() 这种方式增加的盒子不会对之前的结构产生影响 demo: <!DOCTYPE html> <html l ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. jQuery之事件移除
			
    当事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()方法,可以通过unbind()方法来移除事件的效果. 比如下面的一个案例: <script type="tex ...
    
			
    2. 
						
  2. UVa 10653 - Bombs! NO they are Mines!!
			
    题目大意:给你一个二维迷宫,给定入口和出口,找出最短路径. 无权图上的单源最短路,用BFS解决. #include <cstdio> #include <queue> #inc ...
    
			
    3. 
						
  3. Python3基础 filter与lambda表达式配合 筛选出1-100之间的奇数
			
    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
    
			
    4. 
						
  4. POST请求中参数以form data和request payload形式+清空数组方式
			
    测试与服务端ajax时用的dva封装的request方法,而后端怎么也拿不到参数.结果返现参数在request payload里. HTTP POST表单请求提交时:Content-Typeappli ...
    
			
    5. 
						
  5. 使用 Redis 统计在线用户人数
			
    在构建应用的时候, 我们经常需要对用户的一举一动进行记录, 而其中一个比较重要的操作, 就是对在线的用户进行记录. 本文将介绍四种使用 Redis 对在线用户进行记录的方案, 这些方案虽然都可以对在线 ...
    
			
    6. 
						
  6. excel计算后列填充
			
    先鼠标选中一个要输出的地方,输入=,然后就可以输入计算的公示,然后按enter,然后鼠标放在这个框的右下角变成十字,然后双击,就填充整列了.
    
			
    7. 
						
  7. --@angularjs-- $location.path('/login')-$location服务用法示例
			
    $httpProvider interceptor .factory('auth403', ['$rootScope', '$q', '$location', function auth403($ro ...
    
			
    8. 
						
  8. CAReplicatorLayer复制Layer和动画, 实现神奇的效果
			
    今天我们看下CAReplicatorLayer, 官方的解释是一个高效处理复制图层的中间层.他能复制图层的所有属性,包括动画. 一样我们先看下头文件 @interface CAReplicatorLa ...
    
			
    9. 
						
  9. 【原】小写了一个cnode的小程序
			
    小程序刚出来的第一天,朋友圈被刷屏了,所以趁周末也小玩了一下小程序.其实发觉搭建一个小程序不难,只要给你一个demo,然后自己不断的查看文档,基本就可以入门了,不过对于这种刚出来的东西,还是挺多坑的, ...
    
			
    10. 
						
  10. java算法  蓝桥杯   扶老奶奶街
			
    一共有5个红领巾,编号分别为A.B.C.D.E,老奶奶被他们其中一个扶过了马路. 五个红领巾各自说话: A :我和E都没有扶老奶奶 B :老奶奶是被C和E其中一个扶过大街的 C :老奶奶是被我和D其中 ...
    
			
    11.