おまじないの綴り方

spelling of a logical spell

複数のdiv要素の高さを揃えるときのサンプル

目標

divの高さを揃えたい f:id:miyatsuki_yatsuki:20170306003347p:plain

まとめ

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>