Czy istnieje sposób wykrywania, czy zmienił się rozmiar lub położenie elementu DOM?

Question

Od dłuższego czasu szukam sposobu na wykrycie, kiedy zmienił się rozmiar lub położenie elementu DOM. Przyczyną mogło być to, że okno zmieniło rozmiar, lub ponieważ do elementu zostały dodane nowe elementy potomne, lub ponieważ dodano nowe elementy wokół tego elementu, lub ponieważ zmieniono reguły CSS, lub ponieważ użytkownik zmienił rozmiar czcionki przeglądarki. Istnieje ogromna liczba przyczyn zmiany rozmiaru lub pozycji elementu.

Mogę podłączyć programy obsługi zdarzeń do wielu z tych wydarzeń, ale myślę, że są przypadki, które nie są objęte. Miałem nadzieję użyć MutationObservers do obejrzenia elementu offsetWidth lub clientWidth, ale wygląda na to, że dotyczą tylko atrybutów DOM, a nie właściwości Węzłów (a może to właśnie jest to, co implementuje Webkit). Aby być naprawdę kuloodpornym, wygląda na to, że i tak muszę uruchomić pętlę odpytywania.

Czy to prawda? Czy przeoczyłem coś ważnego? Czy sondowanie jest jedynym, kuloodpornym sposobem wykrywania, kiedy zmienił się rozmiar lub pozycja elementu?

Edit

dać trochę więcej kontekstu, to nie jest związane z żadnym konkretnym przypadku zastosowania. Dla mnie pojawił się raz po raz. W mojej obecnej sytuacji miałem nadzieję, że płótno, które zostanie ustawione za pomocą CSS, będzie miało 100% szerokości i wysokości swojego rodzica. Chcę, aby skrypt dostosował właściwości szerokości i wysokości płótna, gdy zmieni się jego wartość PrzesunięcieWidth lub clientWidth (dotyczy to WebGL, w którym właściwości szerokości i wysokości mają wpływ na rozdzielczość bufora ramki). W innym projekcie chciałem, aby element rozwinął się na wysokość, aby wypełnić to, co pozostało w oknie przeglądarki użytkownika. Ja przyszedłem całej tej sytuacji i raz po raz i nieuchronnie rozwiązaniem wydaje się być:

1. Słuchaj window.resize
2. Hak do dowolnego kodu, który piszesz, że może zmienić DOM (lub może korzystać mutacja wydarzenia lub obserwatorów mutacji)
3. czy okresowe operację odpytywania aby oczyścić wszelkie brakowało Szafy

(większość ludzi zatrzymać na 1, a może zrobić trochę z 2)

i chciałem tylko upewnić się, że nie brakuje mi czegoś istotnego.

Nawiasem mówiąc, w mojej sytuacji WebGL, słuchanie window.resize jest wystarczające (i jest nieco preferowane, ponieważ wtedy wymiary płótna i rozdzielczość renderowania zmieniają się w tym samym czasie).

Answer 1

Współpracownik wskazał mi na technique, który używa zdarzeń underflow i overflow. Nie próbowałem tego i nie mam pojęcia, jakiego rodzaju jest obsługa przeglądarki (wygląda jak Chrome i FireFox, i powinna działać w IE, syntetyzując te same zdarzenia, które przeglądała, ale nie mam pojęcia, które wersje wspierać technikę).

Answer 2

Możesz to zrobić za pomocą animacji CSS. Sprawdź http://developer.streak.com/2012/11/how-to-detect-dom-changes-in-css.html i podobne. Przypuszczam, że nie będzie on obsługiwał wszystkich twoich wymagań, teraz, gdy przeczytam go jeszcze trochę.