非表示の DIV 要素の高さを測定するにはどうすればよいですか?

非表示の DIV の高さの測定

display: none 属性を使用して DIV 要素を非表示にすると、その offsetHeight プロパティがゼロになり、本当の高さを判断するのは困難です。この課題を克服するには、非表示の DIV を一時的に表示するという回避策があります。

解決策: 親要素を表示する

非表示の DIV の高さを測定するには、次の手順を実行できます:

1. 表示される親が見つかるまで、DIV のすべての親要素を取得します。
2. すべての非表示の親要素の表示属性をブロックに設定して、それらを作成します。
3. DIV の offsetHeight を測定します。
4. 親要素の表示属性を none にリセットして、再度非表示にします。

パフォーマンス考慮事項

このアプローチでは、非表示の親要素が多数ある場合にパフォーマンスのオーバーヘッドが発生する可能性があります。これを軽減するには、可視性をなしではなく非表示に設定するなど、より効率的な手法を検討する必要があります。

代替ソリューション

親要素を可視にするのが一般的なアプローチですが、他の解決策としては、次のものが挙げられます。

• 非表示の DIV のノードを表示要素にコピーし、高さを測定し、コピーされたノードを削除します。
• 高さを測定する関数を提供する JavaScript ライブラリを使用します。要素の高さ (非表示の場合でも)。

以上が非表示の DIV 要素の高さを測定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。