複数のdiv要素の高さを揃えるときのサンプル
目標
divの高さを揃えたい
まとめ
getBoundingClientRect() で要素のx,y,width,heightが取得できる
コード
<html> <!-- 文字を折り返すようにして結果をわかりやすく --> <style> div { word-wrap: break-word; width:200px; border: 1px solid; } </style> <body> <!-- 左側のdiv要素, ここでheightを指定していないので高さは動的に決まる --> <div style="float:left;"> <div class="upper">あいうえおかきくけこさしすせそなにぬねの</div> <div class="lower">1234567890ABCDEFG</div> </div> <!-- 右側のdiv要素 --> <div style="float:left;"> <div class="upper">あいうえおかきくけこ</div> <div class="lower">1234567890ABCDEFG</div> </div> <script> //高さを揃えたい要素を取得 var nodes = document.getElementsByClassName("upper") var height = 0 //各要素の高さを取得 for(var i = 0; i < nodes.length; i++) { if(height < nodes[i].getBoundingClientRect().height) height = nodes[i].getBoundingClientRect().height } //一番高いやつに高さを合わせる for(var i = 0; i < nodes.length; i++) { nodes[i].style.height = height } </script> </body> </html>