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

Mary-Kate Olsen
リリース: 2024-10-30 03:30:28
オリジナル
766 人が閲覧しました

 How to Measure the Height of Hidden Divs in JavaScript?

非表示の Div の高さの確認: 回避策

多くの場合、親要素が「表示:なし」に設定します。子 div の offsetHeight は 0 を返すため、これは困難になる可能性があります。

初期アプローチ

これまでに検討された解決策には、非表示の親の子ノードをコピーすることが含まれます。ページ上に表示される div にコピーします。次に、ノードを削除する前に、これらの要素の高さを測定できます。ただし、このアプローチは複雑になる可能性があり、すべての場合に実行可能であるとは限りません。

改善されたソリューション

より堅牢なアプローチは、YUI 2 のようなライブラリを使用して識別することです。非表示の要素 (「display:none」または高さと幅が 0) を削除し、表示できるようにします。問題の子要素から始めて、表示可能な親が見つかるまですべての祖先が走査され、表示されます。これにより、子要素の寸法を測定できるようになります。すべての要素が測定されると、元の表示値が復元されます。

考慮事項

非表示の要素を表示すると、ページ レイアウトとコンテンツの可視性に影響を与える可能性があることに注意することが重要です。これが非常に短期間に発生し、ユーザー エクスペリエンスを中断しないようにすることが重要です。

また、要素を元の親階層からコピーする場合は注意が必要です。要素が親コンテキストから分離されている場合、スタイルは正しく適用されない可能性があります。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!