js获取元素高度：clientHeight、offsetHeight

小林.js

已于 2023-12-20 19:37:54 修改

阅读量875

点赞数 6

文章标签： javascript 前端开发语言

于 2023-12-20 18:56:28 首次发布

本文链接：https://blog.csdn.net/qq_43548684/article/details/135115102

版权

js获取元素高度：clientHeight、offsetHeight

一、文字说明
二、代码演示
三、图片说明
四、推荐理解box-sizing: border-box;

一、文字说明

clientHeight：content高度 + padding高度
offsetHeight：content高度 + padding高度 + border高度

二、代码演示

提示：获取元素宽度可以同理模仿

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>042-clientHeight、offsetHeight</title>
  <style>
    .box-item {
      background-color: rgb(230, 228, 152);
      border: 5px solid red;
      width: 100px;
      height: 100px;
      padding: 20px;
      margin: 10px;
    }
  </style>
</head>

<body>
  <div class="box-item"></div>

  <script type="text/javascript">
    // 获取元素
    const itemEle = document.getElementsByClassName('box-item')[0]
    console.log('itemEle', itemEle)

    // clientHeight：content高度 + padding高度
    const itemClientHeight = itemEle.clientHeight
    console.log('itemClientHeight', itemClientHeight) // 140

    // offsetHeight：content高度 + padding高度 + border高度
    const itemOffsetHeight = itemEle.offsetHeight
    console.log('itemOffsetHeight', itemOffsetHeight) // 150

    // 宽度计算同高度：clientWidth、offsetWidth
  </script>
</body>

</html>