So erkennen Sie die Größenänderung von Elementen in HTML5

Question

Wie sollten die Best Practices für die Größenänderung von Elementen beachtet werden?

Ich möchte ein Element (jQuery Dialog in meinem Fall) neu positionieren, sobald es Größe geändert hat. Aber ich bin jetzt mehr daran interessiert, auf eine allgemeine Art und Weise zu tun, um das Größenänderungs-Ereignis zu hören, ohne zu wissen, wie die Größenänderung geschieht. Es nehme an, einfach zu sein, bis ich ein Element gefunden durch

• Fenstergröße ändern
• Inhalt Text ändert
• Kinder Elemente oder ihre Kinder Elemente der Größe verändert
• ein Geschwisterelement Resize (zB der Größe verändert werden Zelle in einer Tabelle)
• JavaScript ändert es src (von img)/style-Attribut direkt (oder Kind) der ist
• JavaScript umschreiben CSS-Regeln oder Sheet
• nativen Resize-Funktion Textfeld oder CSS3 resize
• Browser-Zoom oder
• CSS Übergang oder Animationen-Text vergrößert (von: schweben oder anderen Mitteln)

In dem de-facto-Standard gibt es ein Ereignis window.onresize um die Größe eines Fensters/Frames zu subskribieren. Es gibt jedoch kein Standardereignis für den HTML-Inhalt oder die DOM-Elemente.

stoße ich auf den folgenden Gedanken

• DOM Level 3 Ereignisziel nur auf Fenster/Dokumenttyp
• IE onresize für Elemente hat, aber es ist nur IE Implementierung
• MutationObserver die Mutation Events ersetzen, aber es funktioniert nicht geeignet für die Notwendigkeit von "onresize"
• naive JavaScript-Abfrage

MutationObserver ist nahe (innere DOM-Änderungen), aber es (noch) nicht Browser (IE10 nicht unterstützt) und es erzeugt Lärm, nicht CSS bewusst.

Ein naives JavaScript-Polling sollte in jedem Fall funktionieren, aber es generiert entweder Verzögerung oder CPU-Verlust von vielen Poll.

Answer 1

Ja, es gibt keine einfache Lösung, das ist nicht gut.

ich etwas sehr nützlich für diese gefunden habe .: cross browser event based element resize

Es ist schwierig, einige benötigte HTML an das Element angehängt, die angehört werden müssen und erkennt Ereignis zu scrollen.

Einige html Beispiel von dieser Seite:

<div class="resize-triggers"> 
    <div class="expand-trigger"><div></div></div> 
    <div class="contract-trigger"></div> 
</div> 

auch einige JS:

var myElement = document.getElementById('my_element'), 
    myResizeFn = function(){ 
     /* do something on resize */ 
    }; 
addResizeListener(myElement, myResizeFn); 
removeResizeListener(myElement, myResizeFn); 

Aber es funktioniert für Elemente diejenigen sind in der Lage, Kinder zu haben, nicht für selbstschließend Stichworte.

Sie die Demo sehen http://jsfiddle.net/3QcnQ/67/

Answer 2

Nun, es ist eine einfache Bibliothek für die. Obwohl es nichts Offizielles gibt, wie man auf Dimensionsänderungen aller Arten von Elementen hört und nur window unterstützt es im Moment haben wir glücklicherweise ein Polifill dafür, das sehr genau funktioniert und alle Browser unterstützt, sogar inklusive IE6 +.

https://github.com/marcj/css-element-queries

Sie können ResizeSensor eine Klasse finden. So richten Sie ein Zuhörer auf einem Element können Sie einfach tun:

new ResizeSensor($('.myelements'), function() { 
    console.log('changed'); 
});