ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryで非表示要素の高さを効率的に取得する方法?

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

Susan Sarandon
リリース: 2024-11-03 14:00:03
オリジナル
622 人が閲覧しました

How to Get the Height of Hidden Elements in jQuery Efficiently?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート