ボタンで表示/非表示ができるセル状に並んだボックスの、横一列で一番高いheightで高さを揃えようと、何も考えずに以下のように
//高さ調整
var max_height = 0;
_parents.each( function(){
if ($(this).height() > max_height) {
max_height = $(this).height();
}
});
_parents.height(max_height);
とやっていたら、もともとdisplay:inline-blockがCSSで定義されているのに、非表示から表示へ切り替えると
■ ■ ■
と並んでいたものが
■
■
■
となってしまう。
ブラウザでエレメントを眺めてみると、非表示のボックスのstyle属性に**display:block
**が追加されていました。
謎を解明しようとググってみるとjQueryのリファレンスに以下の記述がありました。
Note: Although style
and script
tags will report a value for .width() or .height() when absolutely positioned and given display:block
(抜粋)
てきとーほんやく
「残念ながら、**.width()や.height()は値の報告の際に、style
タグとscript
タグを絶対座標にしてdisplay:block
**を付与します」
なんと、破壊的なファンクションだったのね・・・