如何使元素随着其 innerHTML 高度的扩展而增加高度 - TypeScript

在 TypeScript 中，通过以下步骤可以实现使元素随着其 innerHTML 高度的扩展而增加高度：

1. 获取元素的 innerHTML 高度。

   const element = document.getElementById('example-element');
   const height = element.scrollHeight;
   

   scrollHeight 属性返回元素内容的高度，包括由于溢出导致的滚动条。

2. 设置元素的高度（包括边框和填充）等于 innerHTML 的高度。

   element.style.height = `${height}px`;
   
   // 可以通过 CSS 属性 `box-sizing: border-box;` 控制边框和填充是否计算在内
   

   style 属性用于设置元素的样式，${height}px 是将 innerHTML 高度转换为像素值。

3. 监听元素的 innerHTML 变化，并重新计算高度。

   element.addEventListener('input', () => {
     element.style.height = 'auto';  // 先设置高度为 auto，以使元素根据更改的 innerHTML 重新计算高度
     element.style.height = `${element.scrollHeight}px`;  // 再设置高度为 innerHTML 的高度
   });
   

   addEventListener() 方法用于在元素上添加事件监听器，'input' 事件会在元素的值发生更改时触发。在事件处理程序中，先将元素的高度设置为 'auto'，以使浏览器在重新计算高度时考虑更改后的 innerHTML；然后再将高度设置为重新计算后的 innerHTML 高度。

以上的代码片段已按 markdown 标记说明，可以直接复制粘贴使用。