<script>

$(document).ready(function(){

    alert("height:"+$("#div").height());   //20px; height属性值

    alert("innerHeight:"+$("#div").innerHeight());//30px; height属性值+padding属性值*2

    alert("outerHeight:"+$("#div").outerHeight()); //34px;height属性值+(padding属性值+border属性值)*2

    alert("outerHeight(true):"+$("#div").outerHeight(true));//50px;height属性值+(padding属性值+border属性值+margin属性值)*2

});

</script>

</head>

<body>

    <div id="div" style="height: 20px;border: 2px solid;padding: 5px;margin: 8px;width: 20px;"></div>

</body>

当中height:高度

innerHeight:高度+补白（padding）

outerHeight：高度+补白+边框

outerHeight(true):高度+补白+边框+边距

height/innerHeight/outerHeight的更多相关文章

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

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

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

    前言 最近练习做弹窗,遇到height(),innerHeight(),outerHeight()的区别. 根据下面的盒模型来了解三者的区别. height():element的height; inn ...

  3. jquery 之height(),innerHeight(),outerHeight()方法区别详解

    在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight().outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width() ...

  4. jquery中innerheight outerHeight()与height()的区别

    1. .height() 获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值(带一个参数). 注意:1).css('height')和.height()之间的区别是后者返回 ...

  5. jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读

    在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...

  6. [DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释

    由于经常搞混这几个属性,所以查找资料总结一下,方便以后翻出来温习. 一.偏移量-以offset开头的 1.offsetHeight:元素在垂直方向上占用的空间大小,像素.包括元素的高度.可见的水平滚动 ...

  7. 用jquery写循环播放div -2

    前面所说的class html元素标签的写法也要有层次性, 这个层次性其实也就是常说的 css类写法要有一个"命名空间, 名字空间" "namespace" 在 ...

  8. jQuery--效果和遍历

    七.jQuery效果 (1)jQuery隐藏和显示 //隐藏 $("#hide").click(function(){ $("p").hide(1000); } ...

  9. 【jQuery】jQuery API 过 一 遍

    closest, parents <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

随机推荐

  1. HDU1176_免费馅饼【号码塔】

    免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  2. Android下的单元測试

    android下的单元測试 在AndroidManifest.xml文件里配置下面信息: 在manifest节点下加入: <!-- 指定測试信息和要測试的包 --> <instrum ...

  3. ftk学习记（消息框篇）

    [ 声明:版权全部,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 上一篇说到了输入框.闲话不多说,首先看结果显示, 大家看看效果是不是和我们之前说的一样.今天, ...

  4. 四个漂亮CSS样式表

    1. 单像素的边框CSS表格 这是一个非常所用的表格风格. 源码: <!-- CSS goes in the document HEAD or added to your external st ...

  5. 逆向wireshark学习SSL协议算法(转)

    小贴士:SSL协议的定义 SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整 ...

  6. 【Linux探索之旅】第二部分第四课：文件操纵，鼓掌之中

    内容简介 1.第二部分第四课:文件操纵,鼓掌之中 2.第二部分第五课预告:用户和权限 文件操纵,鼓掌之中 既然上一课我们学习了Linux中的文件组织方式,那么现在就该是玩弄,啊不,是操纵它们的时候了. ...

  7. android-将系统和应用程序级的屏幕亮度

    /** * 获取当前屏幕亮度模式 * SCREEN_BRIGHTNESS_MODE_AUTOMATIC=1 为自己主动调节屏幕亮度 * SCREEN_BRIGHTNESS_MODE_MANUAL=0 ...

  8. 答读者问(8)：相关Java问题涉及到学习

    近来的,我收到一个研究生朋友的电子邮件,一般内容如下面: 日 (本人微博:http://weibo.com/zhouzxi?topnav=1&wvr=5,我们的聊天号码:245924426.欢 ...

  9. [LeetCode66]Plus One

    题目: Given a non-negative number represented as an array of digits, plus one to the number. The digit ...

  10. POJ 2405 Beavergnaw （计算几何-简单的问题）

    Beavergnaw Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6203   Accepted: 4089 Descri ...