I'll try make this answer helpful, from a learner's perspective.
You say native JS - though, if you're doing everything straight up javascript (ie. you're not using a framework like React or Angular) - then you might as well use JQuery - which basically has some convenience methods and a shorter syntax.
I'm assuming also that you're using ES5 here, so I won't use any ES6 functions.
The first thing is that you'll want to find all your div elements:
I'm going to google 'find element by class javascript'. I typically go for the first mozilla result, which is Document.getElementsByClassName()
.
So our first line is:
var elements = document.findElementsByClassName('block-text');
This will contain an array of html elements.
The next thing we need to do is iterate over the elements.
Now javascript has a bunch of convenient Array functions. Take a look at the documentation here: Array.prototype
Let's see if we can find a function there that will do this real tidily.
It looks like Array.reduce()
will do what we're looking for.
Ok, whoops! It looks like what's returned from document.getElementsByClassName
isn't an Array, but a HTMLCollection. But we can convert this by using this solution.
We can do something like this:
var arr = [].slice.call(elements);
arr.reduce(function(acc, v) {
//return the div with the higher height
});
Thirdly, we need to measure the height of a div.
Imma google 'find height of div javascript': We'll use the first stack overflow result.
Putting it all together, it looks like:
var elements = document.getElementsByClassName('block-text');
var arr = [].slice.call(elements);
var tallest = arr.reduce(function(acc, v) {
return (acc.clientHeight > v.clientHeight) ? acc : v;
});
console.log(tallest);
<div class="block-text a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="block-text b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam.</p>
</div>
<div class="block-text c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non congue risus, et lobortis diam. Vivamus vel faucibus tortor. Sed consectetur arcu velit, vitae feugiat orci congue non. Cras tincidunt viverra metus nec commodo. Aliquam erat volutpat.</p>
</div>