以前总是对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. java.lang.UnsupportedClassVersionError: com/T : Unsupported major.minor version问题解决
			
    编译的时候jdk版本为1.8 2.运行的时候jdk版本为1.7 解决办法:将编译的jdk版本降为1.7,问题解决
    
			
    2. 
						
  2. centos7 安装R和Rstudio客户端
			
    #官网下载R和Rstudio 我下载的是 R-3.2.1.tar.gz和rstudio-0.99.467-x86_64.rpm两个版本 rstudio没有看见有centos版的,下的这个RStudio ...
    
			
    3. 
						
  3. UVa 10346 - Peter's Smokes
			
    题目大意:Peter有n支烟,每k个剩下的烟头可以卷成一支新烟,问Peter能吸多少跟烟? 简单数学题. #include <cstdio> int main() { #ifdef LOC ...
    
			
    4. 
						
  4. Swing 窗口的最小化到系统图标与还原
			
    2014年2月26日 13:01:47 一个上午的功夫,终于折腾好了. 上午主要是卡在监听事件的参数问题.当时脑子不好使,忘记事件是自己构造的,傻傻的测试了半天,如何传递窗口的参数 等中午解决的时候, ...
    
			
    5. 
						
  5. BZOJ 2179FFT快速傅立叶
			
    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2179 题目大意:给出两个n位10进制整数x和y,你需要计算x*y. 题解:FFT,不会的可以 ...
    
			
    6. 
						
  6. IOS 消息
			
    发送消息: NSDictionary *dict=[[NSDictionary alloc]initWithObjectsAndKeys:@"num",[NSString stri ...
    
			
    7. 
						
  7. JavaScript定时机制、以及浏览器渲染机制 浅谈
			
    昨晚,朋友拿了一道题问我: a.onclick = function(){ setTimeout(function() { //do something ... },0); }; JavaScript ...
    
			
    8. 
						
  8. flex blazeds地址
			
    flex blazeds地址 BlazeDS地址:http://sourceforge.net/adobe/blazeds/wiki/Home/最新BlazeDS版本是2011年编译的4.0.1.21 ...
    
			
    9. 
						
  9. Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
			
    之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
    
			
    10. 
						
  10. ARPU值分析
			
    每用户平均收入(“ARPU)它由一个消费群体消费总额除以群体总人数得到. 活跃付费账户(“APA”) 平均同时在线玩家人数(“ACU”) 最高同时在线玩家人数(“PCU”)同时在线玩家数最高峰. 千人 ...
    
			
    11.