Das DOM – das Mysterium der JavaScript-Welt - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 264

getElementById("ausgabe").innerHTML = "";
counter = 0;
}
}
function init() {
with (document) {
getElementsByTagName("button")[0].onclick = ani;
getElementsByTagName("button")[1].onclick = retur;
}
}
window.onload = init;
Wenn ein Besucher nach dem Laden der Seite auf die erste Schaltläche klickt, werden die
Graik vergrößert und die Breite und Höhe der Graik jeweils ausgegeben. Die Animation
erfolgt aufgrund der Zeitverzögerung durch den Einsatz von window.setTimeout() und
den rekursiven Aufruf von ani() . Beachten Sie aber die unscheinbare Stelle bei der Aus-
gabe der Breite und Höhe. Sie sehen hier die Größenangaben mit der Einheit px . Und dahin-
ter steckt viel mehr als nur eine optische Feinheit.
Bild 8.17■ Die Animation läut - beachten Sie die Pixelangaben der Größe.
In der Funktion ani() wird bei jedem Aufruf wieder die Variable counter um den Wert 1
erhöht ( counter++; ). Und damit werden die Breite und die Höhe des Bilds verändert. Aber
dazu greifen wir hier auf das style -Objekt zu. Beachten Sie, dass die Breite und Höhe des
Bilds jedoch mit Style Sheets festgelegt wurden. Beim Zuweisen der Breite und Höhe auf
diesem Weg müssen wir deshalb die Einheit "px" anhängen. Das ist ein entscheidender
Punkt, denn wenn Sie mit CSS einmal die Maße von einem Objekt in der Webseite festgelegt
haben, hat diese Festlegung eine höhere Priorität als die Festlegung der Ausmaße in HTML
mittels Attributen. Die Funktion zum Zurücksetzen der Animation stellt einfach wieder den
Originalzustand beim Laden der Webseite her. Beachten Sie auch hier die Notwendigkeit
zur Angabe der Einheit.