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. Qt MainWindow结构

    (图自:FinderCheng 的 Qt 学习之路(11): MainWindow)

  2. ionic2配置问题集

    我在配置ionic2中遇到的问题,及我的解决方案. ionic start MyIonic2Project tutorial --v2 网络很坑爹,配置lantern后,也是多次尝试才下载成功. io ...

  3. 通过sougou输入法，解决卡在Setup Wizard（小绿人）界面

    本人使用海信EG900手机(安卓2.3.5,已root),为了使用google的服务,先后手动复制和CWM recovery刷入google服务包(gapps-gb-20110828-signed.z ...

  4. job history 的查看

    linux shell 可以启动 mapred historyserver 然后根据显示的端口hostname+port进行访问(一般默认端口是19888)

  5. python 调用浏览器方法

    每天都要登陆某网站,刷积分.为了节省时间,用了下python中的webbrowser模块.新建.py 文件 #!/usr/bin/python import webbrowser webbrowser ...

  6. 访问者模式（Visitor Pattern）

    定义:封装某些作用于某种数据结构中各元素的操作,它可以在不改变数据结构的前提下定义作用于这些元素的新的操作. Visitor 抽象访问者角色:为该对象结构中具体元素角色声明一个访问操作接口.该操作接口 ...

  7. linux-3.0内核移植到fl2440开发板（以MINI2440为模板）

    我们的fl2440开发板使用的是s3c2440的芯片,与MINI2440十分相似,因此需要改动的地方不多,移植也比较容易. 1.[weishusheng@localhost kernel]$ sudo ...

  8. tp根据数据库动态创建微信菜单

    喻可伟的博客   tp根据数据库动态创建微信菜单 $button = array();$class = M('ucenter_menu')->limit(3)->select();//取出 ...

  9. spring 中容器 map、set、list、property 的 bean 实例化

    参考:http://www.kaifajie.cn/spring/9966.html <bean id="fieldMap" class="org.springfr ...

  10. Linux系统安装之U盘引导

    折腾了一天,终于把系统安装上去了,心里那个苦啊. 参考:http://blog.csdn.net/avilifans/article/details/13768139 安装步骤如下: 第一步:Ultr ...