javascript - 使 DOM 元素的高度相等

Question

我编写 JavaScript/TypeScript 函数:

function setElementsHeightsEqual(el1: HTMLElement, el2: HTMLElement) {
   ...
}

这是典型的情况，当您想要将某个按钮 (el2) 动态附加到某个输入 (el1) 时。

我想让 el2 的高度等于 el1，但我做不到。有两个问题:

1. 所有可能返回高度的调用对我来说都是无能为力的:

   el1.offsetWidth; // will return 0 if document is not rendered yet
   el1.style.height; // will return "" if it is set inside external CSS
   el1.style.paddingTop; // the same
   el1.style.paddingBottom; // the same
   

换句话说，是否有可能计算某些指定元素的高度？

1. 如何设置 el2 的高度？我们甚至不知道它的“box-sizing”，与 (1) 中的问题相同。

这些任务在 JS + HTML DOM 中是不可能完成的吗？

Answer 1

offsetHeight 是一种安全的方式。如果未加载该元素，请将您的函数调用移至 window.onload。

这里有一个工作示例:

function setMaxHeight(...elements) {
  console.log(elements);
  // Get max height
  var height = 0;
  for(let element of elements) {
    console.log(element.offsetHeight);
    if(element.offsetHeight > height) height = element.offsetHeight;
  }
  
  // Change all elements height to max.
  for(let element of elements) {
    element.style.height = height + 'px';
  }
}


window.onload = function() {
  var object1 = document.querySelector('.object1');
  var object2 = document.querySelector('.object2');
  var object3 = document.querySelector('.object3');
  setMaxHeight(object1, object2, object3);
};

.object1 {
  border: 1px solid #000;
  display: block;
  float: left;
  height: 50px;
  width: 20%;
}

.object2 {
  border: 1px solid #0cc;
  display: block;
  float: left;
  height: 120px;
  width: 30%;
}

.object3 {
  border: 1px solid #afc;
  display: block;
  float: left;
  height: 20px;
  width: 10%;
}

<div id="container">
  <div class="object1">Text</div>
  <div class="object2">Text2</div>
  <div class="object3">Text3</div>
</div>

比较使用和不使用 Javascript 部分的运行情况。

希望对您有所帮助。