jQuery での非表示要素の高さの取得

非表示要素を扱う場合、その高さを取得するのは困難な場合があります。要素を一時的に表示して高さを測定し、その後再び非表示にするという従来のアプローチは非効率であるように思えます。より最適な解決策はありますか?

jQuery 1.4.2 アプローチ

jQuery 1.4.2 を使用した例を次に示します:

$select.show();
optionHeight = $firstOption.height(); // Obtain height after displaying the element
$select.hide();

このメソッドには、要素の可視性が変更されるという欠点があり、望ましくない副作用が発生する可能性があります。

要素のスタイルのハッキング

別のアプローチは、高さを計算するときに要素のスタイルを操作して要素を非表示にすることです:

var previousCss = $("#myDiv").attr("style"); // Store the original style

// Set visibility to 'hidden' and display to 'block'
$("#myDiv").css({
    position: 'absolute', // Optional if the element is already absolute
    visibility: 'hidden',
    display: 'block'
});

optionHeight = $("#myDiv").height(); // Measure height with modified visibility

// Restore the original style
$("#myDiv").attr("style", previousCss ? previousCss : "");