Question

我编写JavaScript / TypeScript函数：

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

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

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

所有可能的回电高度对我来说都无能为力：

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

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

如何设置el2的高度？我们甚至不知道＆＃34; box-sizing＆＃34;，与（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部分比较运行。

我希望这会有所帮助。

Answer 2

这是我为我想要的元素设置相同高度的方式。为要使其高度相同的元素指定一个类名。

<div class="sameElementHeight">
  <img src="/path/to/Image" class="sameImageHeight">
  <p>YOUR TEXT</p>
</div>
<div class="sameElementHeight">
  <img src="/path/to/Image" class="sameImageHeight">
  <p>YOUR TEXT</p>
</div>
<div class="sameElementHeight">
  <img src="/path/to/Image" class="sameImageHeight">
  <p>YOUR TEXT</p>
</div>

首先，创建一个这样的函数：

equalheight = function(container){

    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array(),
        $el,
        topPosition = 0;
    jQuery(container).each(function() {

        $el = jQuery(this);
        jQuery($el).height('auto')
        topPostion = $el.position().top;

        if (currentRowStart != topPostion) {
            for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
                rowDivs[currentDiv].height(currentTallest);
            }
            rowDivs.length = 0; // empty the array
            currentRowStart = topPostion;
            currentTallest = $el.height();
            rowDivs.push($el);
        } else {
            rowDivs.push($el);
            currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
        }
        for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
            rowDivs[currentDiv].height(currentTallest);
        }
    });
}

然后在关闭body标签之前调用它：

 <script>
   equalheight(".sameElementHeight");
   equalheight(".sameImageHeight");
 </script>
</body>

在向文档中添加新元素时，也可以调用此函数。它将计算元素的高度并为它们设置相同的高度，并对图像也一样。

我希望它有所帮助。

使DOM元素的高度相等

2 个答案: