比较height()，innerHeight()，outerHeight()和outerHeight(true)

来源：互联网发布：在淘宝好评返现违规吗编辑：程序博客网时间：2024/06/05 16:08

对比jq中获取元素高度的几个函数(宽度同解)：height()，innerHeight()，outerHeight()和outerHeight(true)。
height():元素内容的高度，即盒模型中的content高度；
innerHeight()：content高度+padding上下高度；
outerHeight()：content高度+padding上下高度+边框上下高度；
outerHeight(true)：content高度+padding上下高度+边框上下高度+margin上下高度；

注意：只有outerHeight()函数可带有参数

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  <style>  .bb{margin: 5px;border: 10px blue solid ;padding: 100px;}  </style>  <script>  $(function(){alert($(".bb").height()+"            "+$(".bb").innerHeight()+"      "+$(".bb").outerHeight()+"      "+$(".bb").outerHeight(true))  })  </script></head><body><div style="margin-top:1000px; width:600px;heigth:500px;background: yellow"><div class="cc" >  <div class="bb" style="width:500px;height:500px;background:red">  5555  </div></div></div></body></html>

0 0