私は長い間、DOM 要素のサイズや位置が変更されたことを検出する方法を探していました。ウィンドウのサイズが変更された、要素に新しい子要素が追加された、この要素の周囲に新しい要素が追加された、CSS ルールが変更された、またはユーザーがブラウザのフォント サイズを変更したことが原因である可能性があります。要素のサイズや位置が変更される理由は数多くあります。
これらのイベントの多くに対してイベント ハンドラーをフックできますが、カバーされていないケースがあると思います。MutationObservers を使用して要素の offsetWidth または clientWidth を監視することを望んでいましたが、これらは Node プロパティではなく DOM 属性にのみ適用されるようです (または、Webkit が実装しているものだけかもしれません)。したがって、完全に防弾するには、とにかくポーリング ループを実行する必要があるようです。
これは正しいです？何か重要なことを見逃していませんか？要素のサイズや位置がいつ変更されたかを検出する唯一の防弾方法はポーリングですか?
編集
もう少しコンテキストを与えるために、これは特定のユースケースに結び付けられていません。私にとって、それは何度も何度も出てきました。私の現在の状況では、CSS を介して、その親の幅と高さが 100% になるようにキャンバスを設定したいと考えていました。offsetWidth または clientWidth が変更されたときに、スクリプトでキャンバスの幅と高さのプロパティを調整する必要があります (これは、幅と高さのプロパティがフレームバッファの解像度に影響する WebGL 用です)。別のプロジェクトでは、要素の高さを拡張して、ユーザーのブラウザー ウィンドウの残りのスペースを埋めたいと考えていました。私はこの状況に何度も遭遇しましたが、必然的に解決策は次のようになります。
- window.resize を聞く
- DOM を変更する可能性がある (または、Mutation Events または Mutation Observers を使用する可能性がある) コードにフックします。
- 見逃したケースをクリーンアップするために定期的なポーリング操作を行う
(ほとんどの人は 1 で終わり、おそらく 2 を少し実行します)
重要な何かを見逃していないことを確認したかっただけです。
ちなみに、私の WebGL の状況では、window.resize をリッスンするだけで十分です (キャンバスのサイズとレンダリングの解像度が同時に変化するため、むしろ好ましいです)。