Breite oder Höhe eines Elements geändert?
Der häufigste Grund für eine Größenänderung ist das Drehen eines Handys oder Tabletts vom Hochkant- oder Porträt-Modus in das Querformat bzw. Landscape. Darüber hinaus können dynamisch hinzugefügte Elemente die Breite / Höhe ihres Containers ändern.
Ein Resize Observer beschränkt die Beobachtung auf einzelne Elemente, während das globale window.resize bei jeder Größenänderung des Viewports feuert und schnell zu Leistungseinbußen führt.
Resize Observer - Initialisierung
Der Resize Observer wird genauso wie der Intersection Observer durch eine Callback-Funktion initialisiert:
const resizeObserver = new ResizeObserver(
entries => {
});
Der Aufruf erfolgt mit
resizeObserver.observe(elems); resizeObserver.observe(otherElems);
Die Callback-Funktion iteriert über die gemeldeten Elemente.
const resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
document.querySelector (".res").innerHTML = `width: ${entry.contentRect.width} height: ${entry.contentRect.height}`;
});
});
const elems = document.querySelector('.ente');
myObserver.observe(elems);
Jedem beobachteten Element ist ein Objekt mit einem contentRect und einer target-Eigenschaft zugewiesen. Target ist das DOM-Element selber. Das contentRect hat width, height, x, y, top, right, bottom und left.
Anders als die mit getBoundingClientRect enthalten Breite und Höhe des contentRect kein Padding. contentRect.top ist top padding, contentRect.left ist left padding.
resizeObserver und CSS resize
Der Benutzer kann ein HTML-textarea-Element schon seit langer Zeit durch Ziehen an der Ecke unten rechts kleiner oder größer aufziehen. CSS erlaubt mit der resize-Eigenschaft weiteren Elementen ein Verkleinern oder Vergrößern von Bereichen:
.myElem {
resize: vertical/horizontal/both
}
Es war einmal eine kluge junge Ente, die hervorragend sehen konnte und obendrein eine angesehene Mathematikerin war. Durch das lange Studieren bei schlechtem Licht wurden ihre Augen mit den Jahren zusehens schlechter, und eines Tages konnte sie kaum noch ihre eigenen Randnotizen erkennen, nicht einmal ihre Lieblingsformel e = N*te.
Formeln mit MathML konnte sie nur noch erkennen, wenn sie nicht innerhalb von Zeilen standen, sondern zentral mit viel Padding drum herum.
Weil Chrome MathML damals noch nicht verstand, konnte sie Publikationen nur noch mit Firefox studieren. Darum bat sie eines Tages ihren Assistenten, ihr einen guten Augenarzt zu suchen.
const myObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
document.querySelector (".res").innerHTML = "width: " + entry.contentRect.width + "
height: " + entry.contentRect.height;
});
});
const someEl = document.querySelector('.ente');
myObserver.observe(someEl);
