CSS: height und width eines Elements mit Javascript

Mit Javascript lassen sich die CSS Werte eines Elements nicht nur auslesen, sondern auch setzen: So kann man mit Javascript etwa dynamisch Elemente in der Größe verändern oder neu platzieren. Damit das funktioniert, muss man auf die Werte aber auch zugreifen können.

Ganz wichtig ist dabei die ID des Objektes (in unserem Beispiel einfach ein DIV). Über dessen ID (die auf der gesamten HTML-Seite nur einmal vorhanden sein darf) lassen sich die Werte auslesen und neu setzen:

Beim Auslesen des Wertes für Höhe und Breite, “height” und “width”, muss man allerdings beachten, dass diese etwas anders lauten: Während man die Attribute mit den Namen “height” und “width” zwar ändern kann, lassen sich die aktuellen Werte damit nicht auslesen. Stattdessen muss man “offsetWidth” und “offsetHeight” verwenden: “width” und “height” liefern leere Ergebnisse zurück!

var breite = document.getElementById('element').offsetWidth;

var hoehe = document.getElementById('element').offsetHeiht;

Dieser Code liefert die Breite und die Höhe eines Elements, das die ID “element” hat:

<div id="element"></div>

Möchte man die Höhe und Breite des Elements ändern, greift man allerdings wieder auf die Eigenschaften “width” und “height” zurück:

document.getElementById('element').style.width = '200px';

document.getElementById('element').style.height = '100px';