There are blocks with different amounts of text, and accordingly different heights.

How on pure js to set them equal height?

Here is my attempt:

var boxes = document.getElementsByClassName('.box'); for( var i = 0; i < boxes.length; i++ ){ var height = 0; var current_height = this.offsetHeight; if(current_height > height) { height = current_height; } } 
  • and what does the code do in this attempt? - Grundy
  • 3
    not working .... - Marina Voronova
  • one
    Great answer :) - user207618
  • @MarinaVoronova, works fine, it is executed and will not even write any errors. - Grundy
  • can var height = 0; declare before the loop, not in the loop. - Dmitriy Kondratiuk

2 answers 2

 function foo() { var boxes = document.getElementsByClassName('box'); var tmp = 0; for (var i = 0; i < boxes.length; i++) { if (boxes[i].offsetHeight > tmp) { tmp = boxes[i].offsetHeight; } } for (var z = 0; z < boxes.length; z++) { boxes[z].style.height = tmp + "px"; } } 
 .box { width: 100px; border: 2px solid red; float: left; word-wrap: break-word; } .warp { float: right; margin-right: 150px; } 
 <div class="warp"> <div class="box">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div> <div class="box">222222222222222222222222222222222222222</div> </div> <span onclick="foo()">Выровнить</span> 

  • Only I see that the blocks are not "aligned"? do you have different heights? - Marina Voronova
  • @MarinaVoronova click on Align ... - C.Raf.T
  • thank you, it works. I will only do it so that it is called when the dom boots. - Marina Voronova
  • @MarinaVoronova just wanted to visually show that they change height :) - C.Raf.T
  • I was not attentive, did not notice onclick = "foo () - Marina Voronova

In general, these things are better done on css. There are different ways and to understand what to apply in your case, you need to know the whole task.

As for your code, there is a lot that is not true in it.

  1. document.getElementsByClassName('.box');
    This selector does not work that way. The point here is not needed document.getElementsByClassName ('box')

  2. height = 0;
    The variable will be reset on each iteration of the loop. It must be taken out of the cycle.

  3. this
    This is a keyword and in this case it refers to a global object. If you use such a loop, then you can refer to the element like boxes[i]

  4. You do not change the height of the blocks anywhere

Since you want, you can do so:

 var boxes = document.getElementsByClassName('box'); var height = 0; //Определяем максимальную высоту блока for( var i = 0; i < boxes.length; i++ ){ var current_height = boxes[i].offsetHeight; if(current_height > height) { height = current_height; } } //Задаем максимальную высоту блока всем элементам for( var i = 0; i < boxes.length; i++ ){ boxes[i].style.height = height + 'px'; } 
 .box { width: 50px; background-color: blue; margin: 10px; } .box1 { height: 40px } .box2 { height: 30px } .box3 { height: 70px } 
 <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> 

  • thank. corrected the errors and got the height of all the blocks. but my question was how to set the same height for all blocks? the height of the blocks is not fixed of course. - Marina Voronova
  • I corrected your code and gave an example of a working code - Alexey Prokopenko