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. apply 伴生对象 单例对象

    apply(): 当类或者对象有一个主要用途时,apply方法提供了很好语法机制 scala> class Foo {} defined class Foo scala> object F ...

  2. 深入剖析ConcurrentHashMap(1)

    转载自并发编程网 – ifeve.com本文链接地址: 深入剖析ConcurrentHashMap(1) ConcurrentHashMap是Java5中新增加的一个线程安全的Map集合,可以用来替代 ...

  3. Flask-SQLAlchemy 的操作

    from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) db = SQLAlchemy(app) ================= ...

  4. poj1852 Ants ——想法题、水题

    求最短时间和最长时间. 当两个蚂蚁相遇的时候,可以看做两个蚂蚁穿过,对结果没有影响.O(N)的复杂度 c++版: #include <cstdio> #define min(a, b) ( ...

  5. [1]开发准备-使用C#.NET开发基于本地数据缓存的PC客户端

    小记:本人是PHPer,对C#.NET的开发只能说看得懂,也写得了功能略简单的PC客户端程序,下面的是本人开发一款名叫“理财速记”的PC客户端软件的全过程记录,期间包括比较繁琐的C#.NET资料查询等 ...

  6. OS实验报告--FCFS算法

    实验二.作业调度模拟实验 专业:商业软件工程  姓名:王泽锴 学号:201406114113 一.实验目的 (1)加深对作业调度算法的理解: (2)进行程序设计的训练. 二.实验内容和要求 (1)实验 ...

  7. MFC的几处坑

    本人愚笨,一个滚动条控件还让我研究了几天,记录下成果. 1. GetScrollRange();获取滚动条的范围,个人觉得用意不大. GetScrollLimit();获取滚动按钮活动的范围 Scro ...

  8. 面试题五 数组中出现次数超过一半的数字 时间为O(n)

    也就是说 该数字出现的次数比其他所有数字出现次数的和还要多. 因此可以保存两个值,一个数字,一个次数. 遍历时 1.如果数字相同,count++ 2.如果count == 0 count = 1 nu ...

  9. 手把手写一个html_json信息源

    html_json用于从网页里提取json数据. 这里用新浪读书的书讯举个例子,手把手写一个html_json信息源. 打开新浪读书的首页,可以看到页面下方有最新.书讯.童书.小说等几个Tab,这里我 ...

  10. BRISK: Binary Robust Invariant Scalable Keypoints

    注意:本文含有一些数学公式,如果chrome不能看见公式的话请用IE打开网站 1.特征点提取   特征点提取有以下几个步骤: a.尺度空间金字塔结构的构造 和SIFT类似,尺度空间金字塔是由不同的尺度 ...