JavaScriptで要素の高さを揃える

随分長いことほっぽってたブログですが、何か書きたくなってきたので再開。

といっても、最近は動画関連のことはほとんどやってないので、そっちのほうの需要(あるのか？)は満たせないと思いますが。

で、最近の筆者は普段はhtmlとかJavaScriptとかPHPとかを書いたり書かなかったりしています。
今回のお題はそちらの方面です。

本題

さて、今回のネタは次のような感じです。

こんな感じの表示を

こうしたい。

「要素　高さ　揃える」とかでググればjQuery使ったやり方がたくさんヒットするわけですが、IE8のサポートも残り半年を切ってる昨今では、別にアニメーションさせるわけでもないのにjQuery使うのってダサいらしいので今回はパス。

jQueryを使わずにこれをやるheightLine.jsなるライブラリもあるようですが、実際に中身を見てみたところどうもよく理解できない。書かれたのが8年前ではブラウザ環境とかもずいぶん違うだろうしなあ。

というわけで、自分で書いてみることにしました。

まず高さを揃えたい各要素(element)の処理前の高さは、element.offsetHeightの値でわかるので、各要素のoffsetHeightの最大値を求める。

var elems = document.getElementsByClassName(className); //とりあえずクラス名で対象要素を取得
var maxHeight = 0;
for (var i = 0; i < elems.length; i++) {
    maxHeight = Math.max(maxHeight, elems[i].offsetHeight);
}

これで揃える高さが求まりました。

で、offsetHeightは要素のpadding(上下)+border(上下)+heightなので、maxHeightからpaddingとborderの値を引いた値を要素のstyle.heightに設定してやればいいわけですが、ここで少し問題。

要素のpaddingやborderを<style>タグや外部CSSファイルで指定している場合は、element.style以下のプロパティは全部空("")なのですね。

かと言って高さを揃えたい各要素のborder+paddingは(上の画像のように)すべて同じとは限らないわけで、ハードコーディングするのも問題ありすぎです。

さてどーしようとちょっと考えたらこうなりました。

for (i = 0; i < elems.length; i++) {
    var elem = elems[i];
    elem.style.height = "0";
    var height = maxHeight - elem.offsetHeight;
    elem.style.height = height + "px";
}

offsetHeight==padding(上下)+border(上下)+height ですから、height==0のときoffsetHeight==padding(上下)+border(上下)になる。

これでstyle.heightに入れる値はmaxHeightとoffsetHeightの差をとればよいことになります。 なんかインチキ臭いけど、簡単だし実用上は問題ない(多分)。

実際に使うときはこんな感じになります。