以前总是对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. linux 5个查找命令
			
    1. find find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件. find的使用格式如下: $ find <指定目录> <指定条件> <指定动作> ...
    
			
    2. 
						
  2. Swift分割字符串
			
    var str_componets = "I Like Swift " str_componets.componentsSeparatedByString(" " ...
    
			
    3. 
						
  3. iOS 之 内存检查instrument
			
    经常听见iOS开发instrument是一个内存检查工具,但是,没想到,它是集成在xcode里面的,而且打开一看,感觉功能非常强大. 打开方式是 product -> profile 头一次运行 ...
    
			
    4. 
						
  4. java  环境变量 windows（Java之负基础实战）
			
    1.已经安装了JDK 添加系统变量 1.1.添加JAVA_HOME jdk路径,例如:C:\Program Files\Java\jdk1.8.0_65 1.2. PATH 添加内容 %JAVA_HO ...
    
			
    5. 
						
  5. 一个简单版的波纹css3动画
			
    ul{width: 300px;border: red;}ul li{width: 300px;height: 70px;line-height: 70px;background: #fff;text ...
    
			
    6. 
						
  6. Angular  - - ngInclude、ngTransclude
			
    这两个都是HTML DOM嵌入指令 ngInclude 读取,编译和插入外部的HTML片段. 格式:ng-include=“value”<ng-include src=”value” onloa ...
    
			
    7. 
						
  7. Java经典案例之-判断兔子的数量（斐波那契数列）
			
    /** * 描述:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子, * 假如兔子都不死,问每个兔子总数为多少? * 分析:根据题目条件可以推断 * 兔子的规律 ...
    
			
    8. 
						
  8. Android4.0新增的网格布局
			
    网格布局由GridLayout代表,它是Android 4.0新增的布局管理器,因此需要在Android 4.0 之后的版本中才能使用该布局管理器.如果希望在更早的Android平台上使用该布局管理器 ...
    
			
    9. 
						
  9. Flex 数据绑定
			
    Flex 数据绑定 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:f ...
    
			
    10. 
						
  10. pureMVC介绍及学习
			
    1   简介 Pure MVC是在基于模型.视图和控制器MVC模式建立的一个轻量级的应用框架,这种开源框架是免费的,它最初是执行的ActionScript 3语言使用的Adobe Flex.Flash ...
    
			
    11.