【js】コンテンツの高さを一番高い要素に整える

横並びの要素とかで高さを一番高いのに合わせたかったときの備忘録

jqueryで要素を一番高いものに合わせる方法

↓参考、つかままだね

ボックスの高さを一番高いものに合わせる

<script>
var maxHeight = 0;
$('.content').each(function() {
	// 変数に入っている高さを上回ったら上書きする
	if ($(this).height() > maxHeight) {
		maxHeight = $(this).height();
	}
});

// 変数の数値を反映させる
$('.content').height(maxHeight);
</script>

.height()って数値を取得するだけだと思ってた
.css('height', maxHeight)って指定しなくてもいいんだ

javascriptの場合の書き方

<script>
var maxHeight = 0;
const lists = document.querySelectorAll('.content');
// 一番高いコンテンツの高さを取得するためのループ
for (var i = 0; i < lists.length; i++) {
	// 変数に入っている高さを上回ったら上書きする
	if (lists[i].clientHeight > maxHeight) {
		maxHeight = lists[i].clientHeight;
	}
};
// 一番高い高さを反映するためのループ
for (var i = 0; i < lists.length; i++) {
	lists[i].style.height = maxHeight + 'px';
};
</script>

javascriptでやろうとしたら少し手間取った
maxHeight + 'px';ってちゃんとpxの指定しないと反映されなかった

querySelectorAllはfor文で回さないと駄目なんすね
だから一番高い高さを取得するループとそれを適用させるためのループ二つ用意することになった

後、デモのコンテンツの高さをインラインで書いていたらもうひと手間加えないといけなかった
.cssTextってのを使わないと駄目みたい
長くなるから別でまとめました