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で異なる配列を同じ関数に渡して処理を使い回す方法【applyメソッドが便利】

2022.12.11
336
JavaScript

【JavaScript】変数や関数をファイル分割。必要な時に読み込みする方法【モジュール化しよう】

2023.01.06
194
JavaScript

【JavaScript】配列をテーブル形式でコンソールに出力する方法

2023.01.29
266
HTMLCSS JavaScript

スクロールバーが表示されない。SimpleBarを使おう!【即解決】

更新日:2022.09.09
5003