How to get the longest height of the div from pure javascript?











up vote
1
down vote

favorite












I'm trying to achieve what can be achieved via jQuery but I'm avoiding jQuery for learning javascript. I'm trying to get the highest number from .map. This is what I've done so far.



function equalHeight(className) {
var i = Array.from(document.getElementsByClassName(className));
i.forEach(function(items) {
console.info(Math.max(items.scrollHeight));
});
}


but this logs nothing



console.info(items.scrollHeight);


logs all three numbers.



I know I'm missing an elementary mistake, Can someone point out what I'm doing wrong?



Basically, I want to get the longest height and set it to the rest of the divs










share|improve this question


















  • 1




    Your code works fine. Need to see the HTML & CSS to determine what is not working for you. That is what is meant by a Minimal, Complete & Verifiable Example
    – Randy Casburn
    Nov 20 at 0:14












  • @RandyCasburn Point taken, but I posted this question after reviewing HTML and CSS and did console.info(items.scrollHeight);, so clearly the problem was in my javascript code
    – Yash Karanke
    Nov 20 at 0:32















up vote
1
down vote

favorite












I'm trying to achieve what can be achieved via jQuery but I'm avoiding jQuery for learning javascript. I'm trying to get the highest number from .map. This is what I've done so far.



function equalHeight(className) {
var i = Array.from(document.getElementsByClassName(className));
i.forEach(function(items) {
console.info(Math.max(items.scrollHeight));
});
}


but this logs nothing



console.info(items.scrollHeight);


logs all three numbers.



I know I'm missing an elementary mistake, Can someone point out what I'm doing wrong?



Basically, I want to get the longest height and set it to the rest of the divs










share|improve this question


















  • 1




    Your code works fine. Need to see the HTML & CSS to determine what is not working for you. That is what is meant by a Minimal, Complete & Verifiable Example
    – Randy Casburn
    Nov 20 at 0:14












  • @RandyCasburn Point taken, but I posted this question after reviewing HTML and CSS and did console.info(items.scrollHeight);, so clearly the problem was in my javascript code
    – Yash Karanke
    Nov 20 at 0:32













up vote
1
down vote

favorite









up vote
1
down vote

favorite











I'm trying to achieve what can be achieved via jQuery but I'm avoiding jQuery for learning javascript. I'm trying to get the highest number from .map. This is what I've done so far.



function equalHeight(className) {
var i = Array.from(document.getElementsByClassName(className));
i.forEach(function(items) {
console.info(Math.max(items.scrollHeight));
});
}


but this logs nothing



console.info(items.scrollHeight);


logs all three numbers.



I know I'm missing an elementary mistake, Can someone point out what I'm doing wrong?



Basically, I want to get the longest height and set it to the rest of the divs










share|improve this question













I'm trying to achieve what can be achieved via jQuery but I'm avoiding jQuery for learning javascript. I'm trying to get the highest number from .map. This is what I've done so far.



function equalHeight(className) {
var i = Array.from(document.getElementsByClassName(className));
i.forEach(function(items) {
console.info(Math.max(items.scrollHeight));
});
}


but this logs nothing



console.info(items.scrollHeight);


logs all three numbers.



I know I'm missing an elementary mistake, Can someone point out what I'm doing wrong?



Basically, I want to get the longest height and set it to the rest of the divs







javascript arrays






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 20 at 0:01









Yash Karanke

12816




12816








  • 1




    Your code works fine. Need to see the HTML & CSS to determine what is not working for you. That is what is meant by a Minimal, Complete & Verifiable Example
    – Randy Casburn
    Nov 20 at 0:14












  • @RandyCasburn Point taken, but I posted this question after reviewing HTML and CSS and did console.info(items.scrollHeight);, so clearly the problem was in my javascript code
    – Yash Karanke
    Nov 20 at 0:32














  • 1




    Your code works fine. Need to see the HTML & CSS to determine what is not working for you. That is what is meant by a Minimal, Complete & Verifiable Example
    – Randy Casburn
    Nov 20 at 0:14












  • @RandyCasburn Point taken, but I posted this question after reviewing HTML and CSS and did console.info(items.scrollHeight);, so clearly the problem was in my javascript code
    – Yash Karanke
    Nov 20 at 0:32








1




1




Your code works fine. Need to see the HTML & CSS to determine what is not working for you. That is what is meant by a Minimal, Complete & Verifiable Example
– Randy Casburn
Nov 20 at 0:14






Your code works fine. Need to see the HTML & CSS to determine what is not working for you. That is what is meant by a Minimal, Complete & Verifiable Example
– Randy Casburn
Nov 20 at 0:14














@RandyCasburn Point taken, but I posted this question after reviewing HTML and CSS and did console.info(items.scrollHeight);, so clearly the problem was in my javascript code
– Yash Karanke
Nov 20 at 0:32




@RandyCasburn Point taken, but I posted this question after reviewing HTML and CSS and did console.info(items.scrollHeight);, so clearly the problem was in my javascript code
– Yash Karanke
Nov 20 at 0:32












2 Answers
2






active

oldest

votes

















up vote
1
down vote



accepted










I am not 100% sure exactly what you are after, but a few things:



1) Switching from getElementsByClassName to querySelectorAll gives you an object that has forEach built in.



2) You were passing in only 1 value to Math.max






function equalHeight(className) {
var max = 0;
document.querySelectorAll(className).forEach(
function(el) {
console.info(Math.max(el.scrollHeight, max));
if (el.scrollHeight > max) {
max = el.scrollHeight;
}
}
);

return max;
}

var max = equalHeight('.test');

console.info('Max div height:', max);

div {
border: 1px dashed red;
margin: 2px 0;
}

<div class="test">one</div>
<div class="test">one<br/>two</div>
<div class="test">one<br/>two<br/>three</div>





UPDATE



To your question "now how do I use this value as height for the rest of the divs":






function getMaxHeight(className) {
var max = 0;
document.querySelectorAll(className).forEach(
function(el) {
console.info(Math.max(el.scrollHeight, max));
if (el.scrollHeight > max) {
max = el.scrollHeight;
}
}
);

return max;
}

function setHeight(className, height) {
document.querySelectorAll(className).forEach(
function(el) {
el.style.height = height+'px';
}
);
}


var max = getMaxHeight('.test');

console.info('Max div height:', max);

setHeight('.test', max);

div {
border: 1px dashed red;
margin: 2px 0;
}

<div class="test">one</div>
<div class="test">one<br/>two</div>
<div class="test">one<br/>two<br/>three</div>





But, once you do this then none of the DIVs will change height again.



You could set el.style.minHeight and then, check again if you change anything in the DIVs.






share|improve this answer























  • Okay, point taken, but, I'm passing an entire Object in Math.max, shouldn't that suffice to give out maximum number from the Object?
    – Yash Karanke
    Nov 20 at 0:30






  • 1




    Mat.max wants numbers and not objects. You could change the code to convert from an array of Objects into an array of heights and then pass them in to Math.max.apply(Math, arrayOfVals)
    – Intervalia
    Nov 20 at 0:44










  • Quick question: now how do I use this value as height for the rest of the divs?
    – Yash Karanke
    Nov 20 at 16:44










  • See the update for my response
    – Intervalia
    Nov 20 at 16:57










  • Works like charm
    – Yash Karanke
    Nov 20 at 17:02


















up vote
2
down vote













I would use .getBoundingClientRect() and just compare for every iteration



function equalHeight(className) {
const elements = Array.from(document.getElementsByClassName(className));
let highest = 0;

elements.forEach(function(item) {
const itemH = item.getBoundingClientRect().height;
highest = itemH > highest ? itemH : highest;
});

return highest;
}


Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384366%2fhow-to-get-the-longest-height-of-the-div-from-pure-javascript%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    1
    down vote



    accepted










    I am not 100% sure exactly what you are after, but a few things:



    1) Switching from getElementsByClassName to querySelectorAll gives you an object that has forEach built in.



    2) You were passing in only 1 value to Math.max






    function equalHeight(className) {
    var max = 0;
    document.querySelectorAll(className).forEach(
    function(el) {
    console.info(Math.max(el.scrollHeight, max));
    if (el.scrollHeight > max) {
    max = el.scrollHeight;
    }
    }
    );

    return max;
    }

    var max = equalHeight('.test');

    console.info('Max div height:', max);

    div {
    border: 1px dashed red;
    margin: 2px 0;
    }

    <div class="test">one</div>
    <div class="test">one<br/>two</div>
    <div class="test">one<br/>two<br/>three</div>





    UPDATE



    To your question "now how do I use this value as height for the rest of the divs":






    function getMaxHeight(className) {
    var max = 0;
    document.querySelectorAll(className).forEach(
    function(el) {
    console.info(Math.max(el.scrollHeight, max));
    if (el.scrollHeight > max) {
    max = el.scrollHeight;
    }
    }
    );

    return max;
    }

    function setHeight(className, height) {
    document.querySelectorAll(className).forEach(
    function(el) {
    el.style.height = height+'px';
    }
    );
    }


    var max = getMaxHeight('.test');

    console.info('Max div height:', max);

    setHeight('.test', max);

    div {
    border: 1px dashed red;
    margin: 2px 0;
    }

    <div class="test">one</div>
    <div class="test">one<br/>two</div>
    <div class="test">one<br/>two<br/>three</div>





    But, once you do this then none of the DIVs will change height again.



    You could set el.style.minHeight and then, check again if you change anything in the DIVs.






    share|improve this answer























    • Okay, point taken, but, I'm passing an entire Object in Math.max, shouldn't that suffice to give out maximum number from the Object?
      – Yash Karanke
      Nov 20 at 0:30






    • 1




      Mat.max wants numbers and not objects. You could change the code to convert from an array of Objects into an array of heights and then pass them in to Math.max.apply(Math, arrayOfVals)
      – Intervalia
      Nov 20 at 0:44










    • Quick question: now how do I use this value as height for the rest of the divs?
      – Yash Karanke
      Nov 20 at 16:44










    • See the update for my response
      – Intervalia
      Nov 20 at 16:57










    • Works like charm
      – Yash Karanke
      Nov 20 at 17:02















    up vote
    1
    down vote



    accepted










    I am not 100% sure exactly what you are after, but a few things:



    1) Switching from getElementsByClassName to querySelectorAll gives you an object that has forEach built in.



    2) You were passing in only 1 value to Math.max






    function equalHeight(className) {
    var max = 0;
    document.querySelectorAll(className).forEach(
    function(el) {
    console.info(Math.max(el.scrollHeight, max));
    if (el.scrollHeight > max) {
    max = el.scrollHeight;
    }
    }
    );

    return max;
    }

    var max = equalHeight('.test');

    console.info('Max div height:', max);

    div {
    border: 1px dashed red;
    margin: 2px 0;
    }

    <div class="test">one</div>
    <div class="test">one<br/>two</div>
    <div class="test">one<br/>two<br/>three</div>





    UPDATE



    To your question "now how do I use this value as height for the rest of the divs":






    function getMaxHeight(className) {
    var max = 0;
    document.querySelectorAll(className).forEach(
    function(el) {
    console.info(Math.max(el.scrollHeight, max));
    if (el.scrollHeight > max) {
    max = el.scrollHeight;
    }
    }
    );

    return max;
    }

    function setHeight(className, height) {
    document.querySelectorAll(className).forEach(
    function(el) {
    el.style.height = height+'px';
    }
    );
    }


    var max = getMaxHeight('.test');

    console.info('Max div height:', max);

    setHeight('.test', max);

    div {
    border: 1px dashed red;
    margin: 2px 0;
    }

    <div class="test">one</div>
    <div class="test">one<br/>two</div>
    <div class="test">one<br/>two<br/>three</div>





    But, once you do this then none of the DIVs will change height again.



    You could set el.style.minHeight and then, check again if you change anything in the DIVs.






    share|improve this answer























    • Okay, point taken, but, I'm passing an entire Object in Math.max, shouldn't that suffice to give out maximum number from the Object?
      – Yash Karanke
      Nov 20 at 0:30






    • 1




      Mat.max wants numbers and not objects. You could change the code to convert from an array of Objects into an array of heights and then pass them in to Math.max.apply(Math, arrayOfVals)
      – Intervalia
      Nov 20 at 0:44










    • Quick question: now how do I use this value as height for the rest of the divs?
      – Yash Karanke
      Nov 20 at 16:44










    • See the update for my response
      – Intervalia
      Nov 20 at 16:57










    • Works like charm
      – Yash Karanke
      Nov 20 at 17:02













    up vote
    1
    down vote



    accepted







    up vote
    1
    down vote



    accepted






    I am not 100% sure exactly what you are after, but a few things:



    1) Switching from getElementsByClassName to querySelectorAll gives you an object that has forEach built in.



    2) You were passing in only 1 value to Math.max






    function equalHeight(className) {
    var max = 0;
    document.querySelectorAll(className).forEach(
    function(el) {
    console.info(Math.max(el.scrollHeight, max));
    if (el.scrollHeight > max) {
    max = el.scrollHeight;
    }
    }
    );

    return max;
    }

    var max = equalHeight('.test');

    console.info('Max div height:', max);

    div {
    border: 1px dashed red;
    margin: 2px 0;
    }

    <div class="test">one</div>
    <div class="test">one<br/>two</div>
    <div class="test">one<br/>two<br/>three</div>





    UPDATE



    To your question "now how do I use this value as height for the rest of the divs":






    function getMaxHeight(className) {
    var max = 0;
    document.querySelectorAll(className).forEach(
    function(el) {
    console.info(Math.max(el.scrollHeight, max));
    if (el.scrollHeight > max) {
    max = el.scrollHeight;
    }
    }
    );

    return max;
    }

    function setHeight(className, height) {
    document.querySelectorAll(className).forEach(
    function(el) {
    el.style.height = height+'px';
    }
    );
    }


    var max = getMaxHeight('.test');

    console.info('Max div height:', max);

    setHeight('.test', max);

    div {
    border: 1px dashed red;
    margin: 2px 0;
    }

    <div class="test">one</div>
    <div class="test">one<br/>two</div>
    <div class="test">one<br/>two<br/>three</div>





    But, once you do this then none of the DIVs will change height again.



    You could set el.style.minHeight and then, check again if you change anything in the DIVs.






    share|improve this answer














    I am not 100% sure exactly what you are after, but a few things:



    1) Switching from getElementsByClassName to querySelectorAll gives you an object that has forEach built in.



    2) You were passing in only 1 value to Math.max






    function equalHeight(className) {
    var max = 0;
    document.querySelectorAll(className).forEach(
    function(el) {
    console.info(Math.max(el.scrollHeight, max));
    if (el.scrollHeight > max) {
    max = el.scrollHeight;
    }
    }
    );

    return max;
    }

    var max = equalHeight('.test');

    console.info('Max div height:', max);

    div {
    border: 1px dashed red;
    margin: 2px 0;
    }

    <div class="test">one</div>
    <div class="test">one<br/>two</div>
    <div class="test">one<br/>two<br/>three</div>





    UPDATE



    To your question "now how do I use this value as height for the rest of the divs":






    function getMaxHeight(className) {
    var max = 0;
    document.querySelectorAll(className).forEach(
    function(el) {
    console.info(Math.max(el.scrollHeight, max));
    if (el.scrollHeight > max) {
    max = el.scrollHeight;
    }
    }
    );

    return max;
    }

    function setHeight(className, height) {
    document.querySelectorAll(className).forEach(
    function(el) {
    el.style.height = height+'px';
    }
    );
    }


    var max = getMaxHeight('.test');

    console.info('Max div height:', max);

    setHeight('.test', max);

    div {
    border: 1px dashed red;
    margin: 2px 0;
    }

    <div class="test">one</div>
    <div class="test">one<br/>two</div>
    <div class="test">one<br/>two<br/>three</div>





    But, once you do this then none of the DIVs will change height again.



    You could set el.style.minHeight and then, check again if you change anything in the DIVs.






    function equalHeight(className) {
    var max = 0;
    document.querySelectorAll(className).forEach(
    function(el) {
    console.info(Math.max(el.scrollHeight, max));
    if (el.scrollHeight > max) {
    max = el.scrollHeight;
    }
    }
    );

    return max;
    }

    var max = equalHeight('.test');

    console.info('Max div height:', max);

    div {
    border: 1px dashed red;
    margin: 2px 0;
    }

    <div class="test">one</div>
    <div class="test">one<br/>two</div>
    <div class="test">one<br/>two<br/>three</div>





    function equalHeight(className) {
    var max = 0;
    document.querySelectorAll(className).forEach(
    function(el) {
    console.info(Math.max(el.scrollHeight, max));
    if (el.scrollHeight > max) {
    max = el.scrollHeight;
    }
    }
    );

    return max;
    }

    var max = equalHeight('.test');

    console.info('Max div height:', max);

    div {
    border: 1px dashed red;
    margin: 2px 0;
    }

    <div class="test">one</div>
    <div class="test">one<br/>two</div>
    <div class="test">one<br/>two<br/>three</div>





    function getMaxHeight(className) {
    var max = 0;
    document.querySelectorAll(className).forEach(
    function(el) {
    console.info(Math.max(el.scrollHeight, max));
    if (el.scrollHeight > max) {
    max = el.scrollHeight;
    }
    }
    );

    return max;
    }

    function setHeight(className, height) {
    document.querySelectorAll(className).forEach(
    function(el) {
    el.style.height = height+'px';
    }
    );
    }


    var max = getMaxHeight('.test');

    console.info('Max div height:', max);

    setHeight('.test', max);

    div {
    border: 1px dashed red;
    margin: 2px 0;
    }

    <div class="test">one</div>
    <div class="test">one<br/>two</div>
    <div class="test">one<br/>two<br/>three</div>





    function getMaxHeight(className) {
    var max = 0;
    document.querySelectorAll(className).forEach(
    function(el) {
    console.info(Math.max(el.scrollHeight, max));
    if (el.scrollHeight > max) {
    max = el.scrollHeight;
    }
    }
    );

    return max;
    }

    function setHeight(className, height) {
    document.querySelectorAll(className).forEach(
    function(el) {
    el.style.height = height+'px';
    }
    );
    }


    var max = getMaxHeight('.test');

    console.info('Max div height:', max);

    setHeight('.test', max);

    div {
    border: 1px dashed red;
    margin: 2px 0;
    }

    <div class="test">one</div>
    <div class="test">one<br/>two</div>
    <div class="test">one<br/>two<br/>three</div>






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Nov 20 at 16:57

























    answered Nov 20 at 0:18









    Intervalia

    3,96211031




    3,96211031












    • Okay, point taken, but, I'm passing an entire Object in Math.max, shouldn't that suffice to give out maximum number from the Object?
      – Yash Karanke
      Nov 20 at 0:30






    • 1




      Mat.max wants numbers and not objects. You could change the code to convert from an array of Objects into an array of heights and then pass them in to Math.max.apply(Math, arrayOfVals)
      – Intervalia
      Nov 20 at 0:44










    • Quick question: now how do I use this value as height for the rest of the divs?
      – Yash Karanke
      Nov 20 at 16:44










    • See the update for my response
      – Intervalia
      Nov 20 at 16:57










    • Works like charm
      – Yash Karanke
      Nov 20 at 17:02


















    • Okay, point taken, but, I'm passing an entire Object in Math.max, shouldn't that suffice to give out maximum number from the Object?
      – Yash Karanke
      Nov 20 at 0:30






    • 1




      Mat.max wants numbers and not objects. You could change the code to convert from an array of Objects into an array of heights and then pass them in to Math.max.apply(Math, arrayOfVals)
      – Intervalia
      Nov 20 at 0:44










    • Quick question: now how do I use this value as height for the rest of the divs?
      – Yash Karanke
      Nov 20 at 16:44










    • See the update for my response
      – Intervalia
      Nov 20 at 16:57










    • Works like charm
      – Yash Karanke
      Nov 20 at 17:02
















    Okay, point taken, but, I'm passing an entire Object in Math.max, shouldn't that suffice to give out maximum number from the Object?
    – Yash Karanke
    Nov 20 at 0:30




    Okay, point taken, but, I'm passing an entire Object in Math.max, shouldn't that suffice to give out maximum number from the Object?
    – Yash Karanke
    Nov 20 at 0:30




    1




    1




    Mat.max wants numbers and not objects. You could change the code to convert from an array of Objects into an array of heights and then pass them in to Math.max.apply(Math, arrayOfVals)
    – Intervalia
    Nov 20 at 0:44




    Mat.max wants numbers and not objects. You could change the code to convert from an array of Objects into an array of heights and then pass them in to Math.max.apply(Math, arrayOfVals)
    – Intervalia
    Nov 20 at 0:44












    Quick question: now how do I use this value as height for the rest of the divs?
    – Yash Karanke
    Nov 20 at 16:44




    Quick question: now how do I use this value as height for the rest of the divs?
    – Yash Karanke
    Nov 20 at 16:44












    See the update for my response
    – Intervalia
    Nov 20 at 16:57




    See the update for my response
    – Intervalia
    Nov 20 at 16:57












    Works like charm
    – Yash Karanke
    Nov 20 at 17:02




    Works like charm
    – Yash Karanke
    Nov 20 at 17:02












    up vote
    2
    down vote













    I would use .getBoundingClientRect() and just compare for every iteration



    function equalHeight(className) {
    const elements = Array.from(document.getElementsByClassName(className));
    let highest = 0;

    elements.forEach(function(item) {
    const itemH = item.getBoundingClientRect().height;
    highest = itemH > highest ? itemH : highest;
    });

    return highest;
    }


    Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect






    share|improve this answer

























      up vote
      2
      down vote













      I would use .getBoundingClientRect() and just compare for every iteration



      function equalHeight(className) {
      const elements = Array.from(document.getElementsByClassName(className));
      let highest = 0;

      elements.forEach(function(item) {
      const itemH = item.getBoundingClientRect().height;
      highest = itemH > highest ? itemH : highest;
      });

      return highest;
      }


      Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect






      share|improve this answer























        up vote
        2
        down vote










        up vote
        2
        down vote









        I would use .getBoundingClientRect() and just compare for every iteration



        function equalHeight(className) {
        const elements = Array.from(document.getElementsByClassName(className));
        let highest = 0;

        elements.forEach(function(item) {
        const itemH = item.getBoundingClientRect().height;
        highest = itemH > highest ? itemH : highest;
        });

        return highest;
        }


        Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect






        share|improve this answer












        I would use .getBoundingClientRect() and just compare for every iteration



        function equalHeight(className) {
        const elements = Array.from(document.getElementsByClassName(className));
        let highest = 0;

        elements.forEach(function(item) {
        const itemH = item.getBoundingClientRect().height;
        highest = itemH > highest ? itemH : highest;
        });

        return highest;
        }


        Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 20 at 0:10









        Abana Clara

        1,452719




        1,452719






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384366%2fhow-to-get-the-longest-height-of-the-div-from-pure-javascript%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Create new schema in PostgreSQL using DBeaver

            Deepest pit of an array with Javascript: test on Codility

            Costa Masnaga