Revision [342]
This is an old revision of JavaScript made by WojciechLisiewicz on 2008-02-12 11:52:44.
My docs to JavaScript
Tutaj gromadzę dokumentację podstaw ale i bardziej zaawansowanych funkcji javascript-u, które mogłyby się kiedyś przydać.Veränderung des Aussehens von Elementen
Mit Hilfe von DOM (Document Object Model), das von den neueren Browsern (IE ab 5.5 und Netscape ab 6) unterstützt wird, kann man auf jedes Element zugreifen. Damit hat man auch Zugriff auf die Style-Informationen und kann das Aussehen des Elementes mit Hilfe von CSS verändern. Mit Hilfe von document.getElementById(id).style.GewEigenschaft kann man direkt die gewünschte CSS-Eigenschaft eines bestimmten Elementes ändern.
Beispiel: Das Element <p id="test">Irgendein Text</p> soll beim Überfahren mit der Maus rot werden. Dazu gibt man im Event-Handler 'onMouseOver' folgendes an.
var element = document.getElementById("test"); element.style.color = "#FF0000";. Soll der Text beim Verlassen der Maus wieder schwarz werden, steht im 'onMouseOut' document.getElementById('test').style.color = '#000000';
Bei diesem Beispiel könnte statt "document.getElementById('test')" auch einfach nur 'this' stehen, das funktioniert aber nur, wenn sich die Veränderung auf das gleiche Objekt bezieht, das das Event auslöst.
Dynamisches Ein- und Ausblenden von Objekten
Mit Hilfe von CSS können Elemente auch dynamisch ein- und wieder ausgeblendet werden. Dies sollte aber möglichst nur auf div-Elemente angewendet werden, das heisst, man umschliesst das gewünschte Element einfach mit einem div-Tag. (Vorsicht, es gehen nur gesamte Elemente, man kann also z.B. nur eine gesamte Tabelle, nicht aber nur eine Zeile einer Tabelle dynamisch ein- und ausblenden).
Beispiel:
Wir definieren zwei Funktionen einblenden(elementname) und ausblenden(elementname), die auf beliebige Elemente angewendet werden können.
- <script type="text/javascript">
- function einblenden(elementname) {
- document.getElementById(elementname).style.display='block';
- }
- function ausblenden(elementname) {
- document.getElementById('element').style.display='none';
- }
- </script>
Mit Hilfe von zwei Links, die diese Funktionen dann aufrufen, kann nun das Element dynamisch ein- und ausgeblendet werden. <a href="javascript:einblenden('element');">einblenden</a> <a href="javascript:ausblenden('element');">ausblenden</a>
