jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。 公式为height()+padding*2

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。 公式为height()+padding*2+边框*2

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。 公式为height()+padding*2+边框*2+margin*2

实际例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript" >

$(function(){

    $("div").html("innerHeight=" + $("div").innerHeight() + "<br />innerWidth=" + $("div").innerWidth());

 $("div").html( $("div").html() + "<br />Height=" + $("div").height() + "<br />Width=" + $("div").width());

    $("div").html( $("div").html() + "<br />outerHeight=" + $("div").outerHeight() + "<br />outerWidth=" + $("div").outerWidth());

$("div").html( $("div").html() + "<br />outerHeight(true)=" + $("div").outerHeight(true) + "<br />outerWidth(true)=" + $("div").outerWidth(true));

})

</script>

<style type="text/css">

div {

    width:300px;

    height:50px;

    margin:50px;

    padding:50px;

    border:solid 50px red;

}

</style>

<title>demo</title>

</head>

<body>

<div style="border:solid 10px red;">box</div>

</body>

</html>

运行效果:

jQuery中关于height,innerWidth与outerWidth的区别的更多相关文章

  1. jQuery中width、innerWidth、outerWidth的区别

    原文:摘自http://www.canaansky.com/blog/107/ 在css的盒子模型中,最内部是content area,然后是padding.border.margin 那么width ...

  2. jQuery中【width(),innerWidth(),outerWidth()】

    这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...

  3. jQuery中的.height()、.innerHeight()和.outerHeight()

    jQuery中的.height()..innerHeight()和.outerHeight()和W3C的盒模型相关的几个获取元素尺寸的方法.对应的宽度获取方法分别为.width()..innerWid ...

  4. Jquery中的 height(), innerHeight() outerHeight()区别

    jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...

  5. jquery中,size()和length()方法有啥区别

    jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...

  6. jQuery中hover与mouseover和mouseout的区别分析

    本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...

  7. [转载]jQuery中的html，val，text区别

    在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...

  8. jquery中$.get()提交和$.post()提交有区别

    jquery中$.get()提交和$.post()提交有区别吗? 相同点:都是异步请求的方式来获取服务端的数据: 异同点: 1.请求方式不同:$.get() 方法使用GET方法来进行异步请求的.$.p ...

  9. jQuery中的height()、innerheight()、outerheight()的区别总结

    在前端jQuery代码中突然看到outerheight(),第一感觉就是,这是什么鬼?然后仔细查阅了一下,居然发现还有这么多相似的东西. 在jQuery中,获取元素高度的函数有3个,它们分别是heig ...

随机推荐

  1. JavaScript变量作用域

    全部变量拥有全局作用域,局部变量拥有局部作用域(这里注意函数的参数也是局部变量) 1.在函数体内,局部变量的优先级高于同名的全局变量. 我的理解就是当你同时定义了同名的局部变量和全局变量时,函数体内返 ...

  2. 关于django xadmin的学习改造(菜单名称，更改默认前缀数据库)

    路径xadmin-master\demo_app\app\models.py class c(models.Model): ip_address = models.CharField(max_leng ...

  3. 模仿console自写函数打印js的对象

    本以为写个递归函数就可以将js的对象打印出来. 当然第一个想到的估计是JSON.stringify() 这个函数.但这个函数打印到浏览器 显示效果不友好.最友好的显示肯定是 控制台打印咯. 结果尝试打 ...

  4. ajax 页面加载

    大体说说思路,不上代码了: 1.点击加载更多-> ajax向后台传参(当前页page,必须有默认1,其他需要的参数...) 2.后台接收 -> 查询数据 处理形成 json数据 给前台 3 ...

  5. UVa 673 平衡的括号

    题意:给出包含"()"和"[]"的括号序列,判断是否合法. 用栈来完成,注意空串就行. #include<iostream> #include< ...

  6. java 运算符使表达式结果类型自动提升

    1.表达式中的自动类型提升: 表达式求值时,Java自动的隐含的将每个byte.short或char操作数提升为int类型,这些类型的包装类型也是可以的. 例如:short s1 = 1; s1 = ...

  7. jQuery中方法html()与text()的不同

    区别一:html()方法设置或者返回被选元素的内容,其效果类似于操作元素对象的“innerHTML”属性:text()方法设置或者返回被选元素的文本内容,其效果等同于操作元素对象的“textConte ...

  8. UVA 101

    题意:四种操作把a和b所在的数字移动. lrj的思想很好.首先找到共同点.然后不必写四种操作.其次理解vector的方便. #include<iostream> #include<c ...

  9. FizzBuzz 问题

    public class FizzBuzz { static int start = 1; static int end = 100; public static void main(String[] ...

  10. 用c#中的WebBrowser抢小米F码，抢小米手机以及自动测试实现原理

    首先是用c#中的WebBrowser控件打开登录网页,很简单,拖拽WebBrowser到Form上,然后给它的Url属性赋值.WebBrowser就会自动navigate to 这个网页. WebBr ...