jQueryで非表示要素の高さを効率的に取得する方法?

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

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

jQuery 1.4.2 アプローチ

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

<code class="js">$select.show();
optionHeight = $firstOption.height(); // Obtain height after displaying the element
$select.hide();</code>

この方法要素の可視性を変更するという欠点があり、望ましくない副作用が発生する可能性があります。

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

別のアプローチは、要素のスタイルを操作して、それを作成することです。高さを計算している間は非表示になります:

<code class="js">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 : "");</code>

以上がjQueryで非表示要素の高さを効率的に取得する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。