使用分析javascript的clientHeight、offsetHeight、scrollHeight属性和Jquery的innerHeight()、outerHeight()、height()方法

 分析demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <script src="jquery.min.js"></script>
  <style type="text/css">
    .box1, .box2, .box3, .box4, .box5 {
      width: 200px;
      height: 200px;
      margin: 20px;
      padding: 20px;
      border: 1px solid red;
      background: #5ACB3D;
      font-size: 17px;
      text-align: center;
      line-height: 200px;
      color: #BD19C6;
    }
    .box6 {
      width: 200px;
      height: 200px;
      margin: 20px;
      padding: 20px;
      border: 1px solid red;
      background: #5ACB3D;
      font-size: 17px;
      color: #BD19C6;
      overflow-x: hidden;
      word-wrap: break-word;
    }
  </style>
</head>
<body>
    <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="box6">
    1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
  </div>
  <script type="text/javascript">
    var box1 = document.getElementsByClassName('box1')[0]
    box1.innerHTML = $('.box1').height() + 'px' // 200px

    var box2 = document.getElementsByClassName('box2')[0]
    box2.innerHTML = $('.box2').innerHeight() + 'px' // 240px

    var box3 = document.getElementsByClassName('box3')[0]
    box3.innerHTML = $('.box3').outerHeight() + 'px' // 242px

    var box4 = document.getElementsByClassName('box4')[0]
    box4.innerHTML = box4.clientHeight + 'px' // 240px

    var box5 = document.getElementsByClassName('box5')[0]
    box5.innerHTML = box5.offsetHeight + 'px' // 242px

    var box6 = document.getElementsByClassName('box6')[0]
    var temp = box6.innerHTML
    box6.innerHTML = box6.scrollHeight + 'px' + temp // 690px
  </script>
</body>
</html>

 

1、box1使用的是jquery的height()方法，得到的高度是content，不包括padding和border（如图）

整个盒子模型content(200)+padding(20*2)+border(1*2) = 242px，而height()方法只取了content部分。

2、jquery的innerHeight()方法得到的高度是content+padding = 240

3、jquery的outerHeight()方法得到的高度是content+padding+border = 242

4、javascript的clientHeight属性得到的高度是content+padding = 240

5、javascript的offsetHeight属性得到的高度是content+pading+border = 242

6、javascript的scrollHeight属性得到的高度是content+padding = 240，如果div中内容超过div的大小那么scrollHeight的高度将会包含隐藏掉的内容高度（如图）

posted @ 2017-08-30 23:04  MesopotamiazZ  阅读(701)  评论(0)  编辑  收藏  举报