当ブログで公開している「jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン」を、フォントサイズが変更されたときにも高さがそろうように使う方法を紹介します。

ボックスの高さをそろえる JavaScript ライブラリといえば、to-R さんの「heightLine.js」が有名ですね。

このライブラリの中で使われているフォントサイズの変更を取得する方法が「文字サイズの変更を取得するJavaScript」という記事で紹介されているので、そのコードをお借りします。だったら最初から「heightLine.js」を使うよっていう声が聞こえてきますがｗ

jQueryAutoHeight.js を実行させるコード

今回は以下のサンプルページのように、div#box1 と div#box2 の中にある p 要素に対して jQueryAutoHeight.js を適用させます。

• フォントサイズを変更しても高さがそろうサンプル

その場合の基本的なコードは次のようになります。

$('#box1 p').autoHeight();
$('#box2 p').autoHeight({column:4,clear:1});

#box1 の方は普通に全てのボックスをそろえるパターンで、#box2 の方は 1行ごと（4つずつ）に高さを揃えるパターンです。

to-R さんのコードでフォントサイズの変更に対応させる

まずはto-R さんのコードを引用させていただきます。

var e = document.createElement("div");
var s = document.createTextNode("S");
e.appendChild(s);
e.style.visibility="hidden"
e.style.position="absolute"
e.style.top="0"
document.body.appendChild(e);
var defHeight = e.offsetHeight;

checkBoxSize = function(){
	if(defHeight != e.offsetHeight){
		文字サイズが変更された際に実行したい処理
		defHeight= e.offsetHeight;
	}
}
setInterval(checkBoxSize,1000)

上記のコードの「文字サイズが変更された際に実行したい処理」というところに、jQueryAutoHeight.js を実行するコードを書けば言いわけですね。

ただし、それだと文字サイズが変更されないと処理が実行されないので、最終行の直前にも初回に実行するコードを書いておきます。

そうすると以下のようなコードになります。下段だけ抜粋します。

checkBoxSize = function(){
	if(defHeight != e.offsetHeight){
		$('#box1 p').autoHeight();
		$('#box2 p').autoHeight({column:4,clear:1});
		defHeight= e.offsetHeight;
	}
}
$('#box1 p').autoHeight();
$('#box2 p').autoHeight({column:4,clear:1});
setInterval(checkBoxSize,1000)

これで文字サイズの変更に対応できると思いきや、僕の jQueryAutoHeight.js は、セレクタで指定した要素のそれぞれの高さの最大値に合わせる仕様になっています。

したがって、文字サイズを大きくした場合は上記のコードで良いのですが、小さくした場合には対応できません。

そこで、上記コードの 3行目と 4行目に、reset:'reset'　というオプションを追加します。すると、要素の高さを取得する前に、要素に指定されている style 属性を削除してから、高さを取得するようになるので、文字サイズを小さくしたときにも対応できるわけです。

なお、下から 2行目と 3行目の方は、初回の設定なので、reset オプションは必要ありません。あとは、このコードを jQuery(function($){ // 処理 }); の中で実行すればOKです。

完成したコードは以下のようになります。

jQuery(function($){
	var e = document.createElement("div");
	var s = document.createTextNode("S");
	e.appendChild(s);
	e.style.visibility="hidden"
	e.style.position="absolute"
	e.style.top="0";
	document.body.appendChild(e);
	var defHeight = e.offsetHeight;
	checkBoxSize = function(){
		if(defHeight != e.offsetHeight){
			$('#box1 p').autoHeight({reset:'reset'});
			$('#box2 p').autoHeight({column:4,clear:1});
			defHeight= e.offsetHeight;
		}
	}
	$('#box1 p').autoHeight();
	$('#box2 p').autoHeight({column:4,clear:1});
	setInterval(checkBoxSize,1000)
});

余談ですが

余談というか、あくまで僕個人の見解ですが、もしもフォントサイズの変更にも対応させて高さを揃えたい場合は、JavaScript のみでやろうとしないで、単純に (X)HTML と CSS で対応した方が良いと思います。

上記のやり方は１秒ごとにフォントサイズが変わっていないかをチェックする JavaScript が動いているので、それだけの負荷がかかっているということなんですよね。それだったら、多少ラッパーとなる要素を増やしたり、背景画像を作ったりと手間は増えるかも知れませんが、僕はそっちを選んだ方が良い気がします。

まあでも、(X)HTML の構造や何らかの理由で仕方ないとか、CSS だけじゃ無理だっていう場合もなくはないですよね。

この jQueryAutoHeight.js は、セレクタの指定の仕方によっては、結構自由に色々な要素をそろえることができるので、そのようなときは jQueryAutoHeight.js も役立つかも知れませんね。僕も先日やった案件で我ながら便利だなーと思いましたしｗ

以上です。