おそらく、すべてのWeb開発者は、ページ上のサイズ変更イベントを追跡する問題に遭遇したことがあります。 そして、ウィンドウの初心者がこれを行うことができる場合、他の要素の場合、このタスクは多くの頭痛の種をもたらします。 あなたがこのカテゴリーの人々に属しているなら、猫へようこそ。
インターネット上には、setIntervalまたはせいぜい再帰的なsetTimeoutを使用してこの問題を解決する多くの記事があり、指定された要素のサイズが変更されたかどうかを一定の間隔で常にチェックします。 しかし、ほとんどの場合、要素のサイズはめったに変更されないため、この方法は受け入れられず、さらに、不要なメモリの浪費につながる可能性があります。
Habré では、要素内にフレームを追加することで、要素の「onresize」を追跡するソリューションを見つけました。 この方法は機能しており、ほとんどの場合、確かに役立ちます。 しかし、何らかの理由で要素内に余分なフレームを追加したくない場合はどうなりますか？ 要素のサイズ変更を追跡する方法をさらにいくつか提供したいと思います。
まず、要素の寸法がカテゴリに変更されるケースを分割します。
- アイテムの内容を変更する
- アイテムのスタイルを変更する
最初の方法：DOMSubtreeModified
ほとんどの場合、特定のブロックのコンテンツを変更するときにプラグインのステータスを更新するために、要素のサイズを追跡する必要が生じます。 たとえば、中のコンテンツの高さが変更された後にカルーセルプラグインを更新します。
これを行うには、CSSを使用して要素のサイズ変更を監視する必要はありませんが、要素内のDOM構造の変更を追跡するだけです。
これは、 DOMSubtreeModifiedイベントを使用して簡単に実行できます。このイベントは、要素内の構造またはテキストが変更されるたびに発生します。
el.addEventListener("DOMSubtreeModified", function (e) { console.log(" : " + el.clientWidth + " X " + el.clientHeight); }, false);
→ ブラウザのサポート
2番目の方法：トランジションエンド
CSSを使用してサイズ変更を追跡するには、次のスタイルを追加する必要があります。
#el, #el * { /* */ transition-property: width, height, padding, margin; /* " " */ transition-duration: 1ms; }
プロパティのリストと遷移の期間はカスタマイズできます。 要素のこれらのプロパティの一部が既に設定されているか、すべてのネストされた要素に適用する必要がない可能性があります。
CSSセレクターを使用すると、サイズ変更（またはその他のアニメーション化されたプロパティ）を追跡する要素を柔軟に示すことができます。
したがって、ターゲットブロックとその中のすべての要素は即座に変換され、イベントがポップアップするときにtransitionendイベントを追跡できるようになりました 。これは、CSSトランジションが子要素で実行を終了すると起動します。
el.addEventListener("transitionend", function () { console.log(" : " + el.clientWidth + " X " + el.clientHeight); }, false);
→ ブラウザのサポート
残念ながら、transitionstartおよびtransitionまたはtransitionintervalプロパティがないため、イベントは遷移の終了時にのみ発生するため、transition-duration値は小さく選択する必要があります。 ただし、transition-durationを0に設定すると、イベントはまったく発生しません。
おわりに
もちろん、これらの方法はどのような状況でも役立つことはありませんが、ほとんどの場合、最初の方法または2番目の方法（または両方を同時に）で十分だと思います。
この記事がお役に立てば幸いです。 これがハブレでの私の最初の経験であるので、私は批判を正当化することを嬉しく思います。
→ JSFiddleのデモ
UPD：RubaXa は オブザーバーのサイズ変更についてプロンプトを出しました 。
UPD： デモを更新し、より視覚的にし、2番目の方法の説明を補完しました。