如何在Angular 5中获取HTMLDivElement的高度属性？

嘿，既然你已经通过event[0]拿到了目标HTMLDivElement对象，那获取它的高度其实很简单，不过要根据你实际需要的高度类型来选择对应的属性，下面给你详细说明：

1. 可见高度（包含内边距，不含边框、外边距和滚动条） #

如果你需要的是元素在页面上实际显示的可视高度（包含元素的内边距，但不包含边框、外边距和滚动条占用的空间），可以使用clientHeight属性：

onFullScreen: function(event) {
  // 明确类型为HTMLDivElement，避免类型报错
  const targetDiv = event[0] as HTMLDivElement;
  console.log('元素可视高度:', targetDiv.clientHeight);
}

2. 布局高度（包含内边距和边框，不含外边距） #

如果需要的是元素整体的布局高度（包含内边距和边框，但不包含外边距），就用offsetHeight属性，这个属性代表元素在页面中占据的实际垂直空间高度：

onFullScreen: function(event) {
  const targetDiv = event[0] as HTMLDivElement;
  console.log('元素布局高度:', targetDiv.offsetHeight);
}

3. 滚动内容总高度（含超出可视区域的部分） #

如果元素内容超出了可视范围（带有滚动条），想要获取所有内容的总高度（包括超出可视区域的部分），就用scrollHeight属性：

onFullScreen: function(event) {
  const targetDiv = event[0] as HTMLDivElement;
  console.log('元素内容总高度:', targetDiv.scrollHeight);
}

额外小建议（符合Angular风格） #

在Angular 5中，更推荐把组件方法定义为类的成员方法，而非对象字面量形式的function，这样写法更规范，也能更好地适配Angular的特性，比如：

// 组件类中的标准写法
onFullScreen(event: any) {
  const targetDiv = event[0] as HTMLDivElement;
  const desiredHeight = targetDiv.offsetHeight; // 替换成你需要的属性
  console.log('目标高度:', desiredHeight);
}

内容的提问来源于stack exchange，提问作者Yash Jain