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で並列要素の高さを揃える方法について紹介しました。
以上で解説を終わります。
目次