以前总是对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. iOS开发——Localizable.strings
			
    这篇写的不多,但是绝对诚意满满.不会像别人一样,要不不详细,要不罗里吧嗦一堆. 1.创建Localizable.strings文件 Command+N—>iOS—>Resource—> ...
    
			
    2. 
						
  2. BZOJ 1101 [POI2007]Zap ——Dirichlet积
			
    [题目分析] Dirichlet积+莫比乌斯函数. 对于莫比乌斯函数直接筛出处理前缀和. 对于后面向下取整的部分,可以分成sqrt(n)+sqrt(m)部分分别计算 学习了一下线性筛法. 积性函数可以 ...
    
			
    3. 
						
  3. sqlserver 笔记：常用字符串函数
			
    select tid,tid+ coalesce(tid0,'101') from article where  id=1 ---如果tid为null 则 返回101    select LEN('你 ...
    
			
    4. 
						
  4. wdcp使用记录--持续更新
			
    1.扩展memcache 资源地址:http://download.csdn.net/detail/fangminglei/8390449 上传至root文件夹运行 注:官方提供的文件不能安装,需要改 ...
    
			
    5. 
						
  5. 【Xilinx-Petalinux学习】-08-OpenAMP系统实现
			
    openAMP系统实现. 一个核跑Linux,一个核裸跑.     ----->  已经实现. 一个核跑Linux,一个核跑UCOS   ----->  还未实现. Micrium的uco ...
    
			
    6. 
						
  6. My数据库和Ms数据库的区别
			
    mssql 是微软的那个 SQL Server,运行于windows2000,2003等平台 mysql 是由瑞典mySQL AB 公司开发,目前属于Oracle旗下公司.可运行在windows平台. ...
    
			
    7. 
						
  7. iOS MVVM 前世今生
			
    MVVM,Model-View-ViewModel,一个从 MVC 模式中进化而来的设计模式,最早于2005年被微软的 WPF 和 Silverlight 的架构师 John Gossman 提出.
    
			
    8. 
						
  8. 1833: [ZJOI2010]count 数字计数
			
    1833: [ZJOI2010]count 数字计数 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 2951  Solved: 1307[Submit][ ...
    
			
    9. 
						
  9. PHP根据设备类型自动跳转相应网址页面，这个现在实用
			
    现在移动设备上网也很方便,比如Android智能手机,iPhone/iPad等,很多网站都相继推出了针对电脑和这些手机等移动设备访问的网页,如果你的系统是用PHP写的,那面本代码对你会很实用,可根据这 ...
    
			
    10. 
						
  10. java  环境变量 windows（Java之负基础实战）
			
    1.已经安装了JDK 添加系统变量 1.1.添加JAVA_HOME jdk路径,例如:C:\Program Files\Java\jdk1.8.0_65 1.2. PATH 添加内容 %JAVA_HO ...
    
			
    11.