jQuery を使用した非表示要素の高さの取得

非表示要素を操作する場合、さまざまな目的でその寸法を取得する必要がある場合があります。ただし、要素が表示されていない場合、要素の高さを取得する従来の方法は失敗する可能性があります。

非効率なアプローチ

要素を一時的に再表示し、測定するという説明されたアプローチ高さを調整してから再度非表示にするのは面倒で非効率的です。

代替案ソリューション

jQuery は、より効率的なソリューションを提供します:

1. 要素属性の変更: 要素のスタイル属性を一時的に操作します:

   • 位置を絶対に設定します (要素が既に存在する場合はオプション)絶対位置)
   • 表示設定を非表示に設定します (要素を非表示にします)
   • 表示をブロックに設定します (要素を表示しますが、メインのドキュメント フローでは表示しません)
2. Measure Height: jQuery の .height() を使用して要素の高さを取得します。 method.
3. Restore Attributes: attr() メソッドを使用するか、style プロパティを直接設定して、要素のスタイル属性を元の値にリセットします。

コード例

var previousCss = $("#myDiv").attr("style");

$("#myDiv").css({
    position: 'absolute',
    visibility: 'hidden',
    display: 'block'
});

var optionHeight = $("#myDiv").height();

$("#myDiv").attr("style", previousCss ? previousCss : "");

このメソッドを使用すると、ページのレイアウトや可視性に影響を与えることなく、非表示の要素の高さを慎重に測定できます。 .