divs
verschachteln
positionieren
relativ
Vorhang zu
Action!
Hallo ...
später Hallo
ein Spalt
Variable
auf geht's!
abschneiden
schööön!
weiteres heiteres
Klappe zu!
Es wird nun langsam Zeit, vom simplen "Hallo" zu anspruchsvolleren Dingen zu wechseln. In einem ersten Schritt möchten wir den Vorhang ein ganz klein wenig zur Seite schieben, 10 Pixel, um genau zu sein.
Das ist gar nicht mal so schwierig, wenn man weiss, wie.
Nun, der Vorhang wird ja von unserer <div id="vorhang"> repräsentiert.
Und diese div hat eine Positionierungsangabe, welche unter anderem auch
left: 0em enthält.
Wenn wir es schaffen, diesen Wert von 0em auf 10px zu verändern,
dann öffnen wir damit gleichzeitig den Vorhang um einen kleinen Spalt.
Nun hat JavaScript Möglichkeiten, auf Objekte einer HTML-Seite zuzugreifen und mit deren
Style-Eigenschaften zu spielen. Wir brauchen das Objekt mit der Id vorhang, und
dessen Style-Eigenschaft left interessiert uns, die wollen wir nämlich ändern.
Wenn du dir diese Anforderungen vor Augen hältst, kannst du die folgende JavaScript-Anweisung
schon fast wie Klartext lesen:
document.getElementById("vorhang").style.left = "10px" ;
Ersetzen wir also unsere alert-Anweisung durch diese neue Anweisung
und probieren wir's aus!
Es funktioniert tatsächlich, und nun wär's natürlich schön, den Vorhang ganz zu öffnen.