web関連

【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ってのを使わないと駄目みたい
長くなるから別でまとめました

【javascript】(インラインスタイルの時の)コンテンツの高さを一番高い要素に整える
インラインスタイルシートで高さを指定されている時にjavascriptでうまく高さの上書きができなかったときの備忘録 以下は前回のjq...

スライドショーで中のコンテンツの高さ合わせるのに使った
高さを一番高いのに合わせるみたいな機能付いてなかったから

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。