jquery的innerHeight()和outerHeight()的区别
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery的innerHeight()和outerHeight()的区别相关的知识，希望对你有一定的参考价值。
jquery的innerHeight()和outerHeight()的区别:
本章节介绍一下这两个函数的区别，从名称上看都是用来获取高度的，当然也是有区别的，从名称上也能够对其有一个简单的了解，下面就通过代码实例介绍一下这两者的区别。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> p{ background-color:green; height:100px; width:200px; padding:10px; border:5px solid red; margin:10px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function(){ $("#inner").text($("p").innerHeight()) $("#outer").text($("p").outerHeight()) }); }); </script> </head> <body> <p></p> <span id="inner"></span> <span id="outer"></span> <input type="button" id="bt" value="查看效果"/> </body> </html>
从上面的运算结果可以看出，两个函数获取的值是有所区别的，下面就做一下简单介绍。
innerHeight()函数获取的是指定元素的width和padding之和。
outerHeight()函数获取的是指定元素的width、padding和border之和。
也就是两者的区别在于是否包含边框。
相关阅读:
1.innerHeight()函数可以参阅jQuery的innerHeight()方法一章节。
2.outerHeight()函数可以参阅jQuery的outerHeight()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14429
更多内容可以参阅:http://www.softwhy.com/jquery/
以上是关于jquery的innerHeight()和outerHeight()的区别的主要内容，如果未能解决你的问题，请参考以下文章
jQuery height()innerHeight()outerHeight()函数的区别详解
jquery中innerheight outerHeight()与height()的区别
jQuery 的 width()height()innerWidth()innerHeight()outWidth()outHeight() 的区别
jQuery height()innerHeight()outerHeight()函数的区别详解