以前总是对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. smarty3-笔记
			
    smarty3笔记 1.Samrty.class.php 的compile_dir 和template_dir类属性 是private的,setTemplateDir和setCompileDir类方法 ...
    
			
    2. 
						
  2. iOS开发——工厂模式
			
    工厂模式很好用,为表诚意,我直接搞个实用的例子放这,解析一个订单的数据,并且这个订单里面可能不止一件商品的做法. 还是直接上代码,不懂的地方,再提出来. 1.在MyOrderDeals.h文件中 #i ...
    
			
    3. 
						
  3. php小知识。
			
    合并数组的2个方式区别 1)键名为数字时,array_merge()不会覆盖掉原来的值,但+合并数组则会把最先出现的值作为最终结果返回,而把后面的数组拥有相同键名的那些值“抛弃”掉(不是覆盖) 2)键 ...
    
			
    4. 
						
  4. java8 stream ,filter 等功能代替for循环
			
    直接上代码,比较实在. 对象A public Class A{ private Long id; private String userName; ..... ....省略get和set方法 } 在L ...
    
			
    5. 
						
  5. javascript---jquery (1事件)
			
    1.例子说明 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
    
			
    6. 
						
  6. 我的java信息
			
    Java的运行环境版本: 1.7.0_07Java的运行环境供应商: Oracle CorporationJava供应商的URL: http://java.oracle.com/Java的安装路径:  ...
    
			
    7. 
						
  7. Android自定义控件之TextView
			
    转自:http://labs.easymobi.cn/?p=284 有时候Android自带的控件无法满足我们的某些要求,这时就需要我们自定义控件来实现这些功能.比如需要一个TextView里的字倾斜 ...
    
			
    8. 
						
  8. FB面经 Prepare: Task Schedule
			
    tasks has cooldown time, give an input task id array, output finish time input: AABCA A--ABCA output ...
    
			
    9. 
						
  9. iOS特性
			
    iOS的特性是指附加的 readonly , nonmatic等设置
    
			
    10. 
						
  10. 冒泡排序法-java案例详解
			
    /** * 功能:冒泡排序法 * 思想:通过对待排序序列从后向前(从下标较大的元素开始),依次比较相邻元素的排序码, * ,若发现逆序这交换,使得排序码较小的元素逐渐从后部移向前部(从下标较大的单元移 ...
    
			
    11.