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

最新推荐文章于 2023-09-07 13:58:58 发布

我是你的春哥！

最新推荐文章于 2023-09-07 13:58:58 发布

阅读量141

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/liuliuhelingdao/article/details/127748552

版权

分析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>