jQueryで2つの要素の高さを取得し、比較して、高い方をその要素の高さとするー自分用覚書
February 11, 2015
以前、「jQueryで要素の高さを取得し、body要素に記述している背景画像（パターン）のポジション（高さ）を変更する」という記事を書きました。今回はその関連記事となります。
例えば、ヘッダー内にMTのアイテム機能でアップロードした画像をロゴとして表示し、その隣には、フリーエリアがあり、好きにテキストコンテンツを入力できるエリアがあるとします。
すると、このヘッダー要素の中には、その場合や時々で異なる高さのコンテンツが2箇所出現することになります。1つは、アイテムとしてアップロードした画像の高さ。もう1つは、好きに入力したフリーエリアのコンテンツの高さ。
となると、その2つの要素のうち、コンテンツ（画像の高さとテキストコンテンツの高さ）の高さの高い方をヘッダー要素の高さにする必要があります。
それを、前回作成したjQueryを基に作成してみました。JavaScriptの比較演算子と条件文を使いました。
（※注意：＜＞は全角にしています。）
＜script type="text/javascript"＞
var logo_text_height = $('#header .header-main .logo-text').height();
var text_info_height = $('#header .header-main .text-info').height();
if( text_info_height < logo_text_height ){
var header_main_height = $('#header .header-main .logo-text').height() + 70;
}else{
if( logo_text_height < text_info_height ){
var header_main_height = $('#header .header-main .text-info').height() + 70;
}else{
if( logo_text_height == text_info_height ){
var header_main_height = $('#header .header-main .text-info').height() + 70;
}
}
}
$('#header .header-main').height(header_main_height);
var header_height = $('#header .header-main').height() + $('#header .main-text-top-100').height() + $('#header .main-text-top-5050').height();
$('#header').height(header_height);
var position_value = "left " + header_height + "px";
$('body').css('background-position', position_value);
＜/script＞
