jQuery中height()、innerheight()、outerheight()的区别
jQuery中height()、innerheight()、outerheight()的区别一、jQuery 中 height()
获取匹配元素集合中的第一个元素的当前计算高度值，总是返回内容宽度
二、jQuery 中 innerheight()
包括padding，但是不包括border，即： height + padding
三、jQuery 中 outerheight()
包括padding，border，即：height + padding + border
四、jQuery 中 outerheight(true)
包括padding，border和margin,即： height + padding + border + margin
五、height()、innerheight()、outerheight()的实例
<li id="element" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></li>
<script type="text/javascript">
var $ele = $("#element");
// height() = height(100) = 100
document.writeln($ele.height()); // 100
// innerHeight() = height(100) + padding(10*2)= 120
document.writeln($ele.innerHeight()); // 120
// outerHeight() = height(100) + padding(10*2) + border(1*2) = 122
document.writeln($ele.outerHeight()); // 122
// outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132
document.writeln($ele.outerHeight(true)); // 132
</script>
