原生js 获取高度

在原生JavaScript中获取元素的高度，主要有以下几种方式：

一、offsetHeight

1. 基础概念
   • offsetHeight属性返回元素的布局高度，包括元素的高度、内边距（padding）、边框（border），但不包括外边距（margin）。

• 示例代码
• 示例代码
• 应用场景
  • 当需要获取元素在页面布局中所占的实际高度，包括自身的内容高度、内边距和边框时使用。例如，在计算元素与其他元素的相对位置关系，或者进行自适应布局调整时可能会用到。

二、clientHeight

1. 基础概念
   • clientHeight属性返回元素的内部可视高度，包括元素的高度和内边距（padding），但不包括边框（border）、外边距（margin）和滚动条（如果存在且占空间）。

• 示例代码
• 示例代码
• 应用场景
  • 当只关心元素内部可视内容区域的高度，不考虑边框，并且可能涉及到滚动条相关布局时比较有用。比如，在处理可滚动元素内部内容显示比例的情况。

三、scrollHeight

1. 基础概念
   • scrollHeight属性返回元素内容的整个高度，包括由于溢出而不可见的内容高度。如果元素内容没有溢出，它等于元素的可视高度（近似于clientHeight）。

• 示例代码
• 示例代码
• 应用场景
  • 常用于判断元素内容是否溢出，以及在处理自定义滚动条或者与内容高度动态相关的交互效果时使用。例如，当需要根据内容高度动态调整滚动区域的外观或者提示用户内容可滚动时。

四、getBoundingClientRect()方法中的height属性

1. 基础概念
   • getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。其中的height属性表示元素的高度，这个高度包含了元素的边框、内边距，但不包含外边距。它还考虑了元素的变换（如缩放等）情况。

• 示例代码
• 示例代码
• 应用场景
  • 在需要精确获取元素相对于视口的高度，并且考虑到元素的样式变换等情况时使用。例如，在实现一些基于视口位置和元素大小关系的动画效果时。