Written by Kasumi

JavaScriptで並列要素の高さを揃える方法【自動調整】

JavaScriptで並列要素の高さを揃えたい(自動調整)。

jQueryなどのライブラリは使用しないで実装したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装例

See the Pen
Untitled
by Kohei (@kouk05)
on CodePen.0

JavaScriptで並列要素の高さを揃える実装例です。

タイトル・テキストの文字数が一番多い要素に高さを揃えてます。

実装手順は以下の通りです。

JavaScriptで高さを揃える

// 高さを揃える要素
const target = document.querySelectorAll('.txt');

// 空の配列を指定。
const heightlist = [];

// 要素の高さを全て配列に格納
target.forEach(element => {
  const height = element.clientHeight;
  heightlist.push(height);
});

//一番高さがある要素のheightを取得。
const maxHeight = Math.max.apply(null, heightlist);

// 要素にstyle属性を付与。一番高さのある要素のheightを揃える要素全てに指定。
target.forEach(element => {
  element.style.height = maxHeight + 'px';
});

JavaScriptで高さを揃えるコード例です。

コードの詳細は以下の通りです。

高さを揃える要素を全て取得

// 高さを揃える要素
const target = document.querySelectorAll('.txt');

まず最初に高さを揃えたい要素をquerySelectorAllを使って全て取得します。

高さを全て取得。配列に格納

// 空の配列を指定。
const heightlist = [];

// 要素の高さを全て配列に格納
target.forEach(element => {
  const height = element.clientHeight;
  heightlist.push(height);
});

次に前章で取得した要素の高さ(height)をclientHeightを使って取得。

配列に格納します。

一番高さのある要素のheightを取得。全ての同じ要素に付与。

//一番高さがある要素のheightを取得。
const maxHeight = Math.max.apply(null, heightlist);

// 要素にstyle属性を付与。一番高さのある要素のheightを揃える要素全てに指定。
target.forEach(element => {
  element.style.height = maxHeight + 'px';
});

Math.max.applyを使い、一番高いheightを取得。

最後にstyle.heightで、高さを揃えたい全ての要素に一番高いheightをpxで指定します。

以上で高さを揃える事が可能になります。

まとめ

JavaScriptで並列要素の高さを揃える方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【JavaScript】親要素から子要素を取得する方法

2023.01.30
5635
JavaScript

【CSS・JS】本文を透過グラデーションで隠して、もっと見るボタンで開閉するアコーディオンを実装する方法

2023.01.28
5644
JavaScript

【JavaScript】HTML要素に指定したクラスが付与されているか存在をチェックする方法

2023.01.25
1040
JavaScript

scriptタグの読み込み・実行タイミングを変更する方法【defer / async属性を使おう】

2023.01.01
2008