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












1















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

    – user10415043
    Nov 20 '18 at 0:32
















1















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

    – user10415043
    Nov 20 '18 at 0:32














1












1








1








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 '18 at 0:01







user10415043















  • 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 '18 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

    – user10415043
    Nov 20 '18 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 '18 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

    – user10415043
    Nov 20 '18 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 '18 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 '18 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

– user10415043
Nov 20 '18 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

– user10415043
Nov 20 '18 at 0:32












2 Answers
2






active

oldest

votes


















1














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?

    – user10415043
    Nov 20 '18 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 '18 at 0:44











  • Quick question: now how do I use this value as height for the rest of the divs?

    – user10415043
    Nov 20 '18 at 16:44











  • See the update for my response

    – Intervalia
    Nov 20 '18 at 16:57











  • Works like charm

    – user10415043
    Nov 20 '18 at 17:02



















1














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',
    autoActivateHeartbeat: false,
    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









    1














    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?

      – user10415043
      Nov 20 '18 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 '18 at 0:44











    • Quick question: now how do I use this value as height for the rest of the divs?

      – user10415043
      Nov 20 '18 at 16:44











    • See the update for my response

      – Intervalia
      Nov 20 '18 at 16:57











    • Works like charm

      – user10415043
      Nov 20 '18 at 17:02
















    1














    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?

      – user10415043
      Nov 20 '18 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 '18 at 0:44











    • Quick question: now how do I use this value as height for the rest of the divs?

      – user10415043
      Nov 20 '18 at 16:44











    • See the update for my response

      – Intervalia
      Nov 20 '18 at 16:57











    • Works like charm

      – user10415043
      Nov 20 '18 at 17:02














    1












    1








    1







    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 '18 at 16:57

























    answered Nov 20 '18 at 0:18









    IntervaliaIntervalia

    4,32211033




    4,32211033













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

      – user10415043
      Nov 20 '18 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 '18 at 0:44











    • Quick question: now how do I use this value as height for the rest of the divs?

      – user10415043
      Nov 20 '18 at 16:44











    • See the update for my response

      – Intervalia
      Nov 20 '18 at 16:57











    • Works like charm

      – user10415043
      Nov 20 '18 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?

      – user10415043
      Nov 20 '18 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 '18 at 0:44











    • Quick question: now how do I use this value as height for the rest of the divs?

      – user10415043
      Nov 20 '18 at 16:44











    • See the update for my response

      – Intervalia
      Nov 20 '18 at 16:57











    • Works like charm

      – user10415043
      Nov 20 '18 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?

    – user10415043
    Nov 20 '18 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?

    – user10415043
    Nov 20 '18 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 '18 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 '18 at 0:44













    Quick question: now how do I use this value as height for the rest of the divs?

    – user10415043
    Nov 20 '18 at 16:44





    Quick question: now how do I use this value as height for the rest of the divs?

    – user10415043
    Nov 20 '18 at 16:44













    See the update for my response

    – Intervalia
    Nov 20 '18 at 16:57





    See the update for my response

    – Intervalia
    Nov 20 '18 at 16:57













    Works like charm

    – user10415043
    Nov 20 '18 at 17:02





    Works like charm

    – user10415043
    Nov 20 '18 at 17:02













    1














    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




























      1














      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


























        1












        1








        1







        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 '18 at 0:10









        Abana ClaraAbana Clara

        1,621919




        1,621919






























            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.




            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

            How to change which sound is reproduced for terminal bell?

            Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents

            Can I use Tabulator js library in my java Spring + Thymeleaf project?