使DOM元素的高度相等

Question

I write JavaScript/TypeScript function:

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

This is typical situation when you want to attach some button (el2) to some input (el1) dynamically.

I want to make el2's height equal to el1, but I am unable to do it. There are two problems:

1. All possible calls returning height are helpless for me:

    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 

In other words is there any possibility to calculate height of some specified element?

2. How to set height of el2? We do not know even its "box-sizing", the same problem as in (1).

Are these tasks impossible in JS + HTML DOM?

Answer 1

offsetHeight is a safe way to go. If the element is not loaded, move your function call to window.onload.

Here you have a working example:

 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> 

Compare running with and without the Javascript portion.

I hope this helps.

Answer 2

It is the way I set the equal height to elements I want. Give a class name to your elements which you want to make their height the same.

<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>

First, create a function like this:

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);
        }
    });
}

Then call it before closing body tag:

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

You also may call this function when you add new elements to your document. It will calculate the height of the element and set the same height to them and also does the same with images.

I hope it helps.