使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 

換句話說，是否有可能計算某些指定元素的高度？

2. 如何設置el2的高度？ 我們甚至都不知道它的“盒子大小”，這與（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>

當您向文檔中添加新元素時，也可以調用此函數。 它將計算元素的高度並為其設置相同的高度，並且對圖像也執行相同的操作。

希望對您有所幫助。