前端获取组件高度的3种方法：offsetHeight、getBoundingClientRect、getComputedStyle

在前端中，如果不知道组件高度的情况下，可以使用以下方法来获取组件的高度：

1. 使用JavaScript的'offsetHeight'属性：'offsetHeight'属性返回一个元素的高度，包括元素的高度、垂直内边距和边框。可以通过'document.querySelector()'或'document.getElementById()'等方法获取元素，然后使用'offsetHeight'属性获取其高度。

const element = document.querySelector('.component');
const height = element.offsetHeight;
console.log(height);

2. 使用JavaScript的'getBoundingClientRect()'方法：'getBoundingClientRect()'方法返回一个元素的大小及其相对于视口的位置。可以通过'document.querySelector()'或'document.getElementById()'等方法获取元素，然后使用'getBoundingClientRect()'方法获取其高度。

const element = document.querySelector('.component');
const rect = element.getBoundingClientRect();
const height = rect.height;
console.log(height);

3. 使用CSS的'getComputedStyle()'方法：'getComputedStyle()'方法返回一个对象，其中包含了指定元素的所有计算后的样式。可以通过'document.querySelector()'或'document.getElementById()'等方法获取元素，然后使用'getComputedStyle()'方法获取其样式，再通过'height'属性获取其高度。

const element = document.querySelector('.component');
const styles = window.getComputedStyle(element);
const height = styles.height;
console.log(height);

以上方法都可以在不知道组件高度的情况下获取到组件的高度。需要根据实际场景选择合适的方法。