jquery height() innerHeight () outerHeight( )

一 看解释：

1 height( )只可以获取内容高度，也就是原本设置的height高度值，或者由内容撑开的高度值

2 innerHeight( ) ,获取的高度包括，padding不包括边框

3 outerHeight( ),获取的高度值包括 padding 和border ，不包括margin

二 撸代码：

• 不写参数可以获取当前值

  <style>
      *{
          margin: 0;
          padding: 0;
      }
      div{
          border: 5px solid #000;
          position: absolute;
          width: 300px;
          height: 200px;
          margin: 100px;
  
      }
      p{
          border: 1px solid green;
          width: 200px;
          height:18px
          padding: 10px;
          margin: 20px;
      }
  </style>
  <div>
    <p id="p2">这是一个段落</p>
  </div>
  <script src="jquery-1.12.2.js"></script>
  
  <script> 
      console.log($("#p2").height());       //18     padding   18  margin 18
      console.log($("#p2").innerHeight());  //18               38         38
      console.log($("#p2").outerHeight());  //20               40         40
  </script>
  

代码解释：padding 和 margin 逐渐加上之后，输出值变化如注释所示。

• 写了参数可以设置 height innerHeight outerHeight它们各自代表的高度的值

  <script>
      $("#btn").click(function(){
          $("#p2").height(30);
          $("#p2").innerHeight(60);
          $("#p2").outerHeight(70)；
          console.log($("#p2").height());
          console.log($("#p2").innerHeight());
          console.log($("#p2").outerHeight());
      })
  </script>
  

三：width( ) innerWidth( ) outerWidth( )也是一样的道理。