Browser Scripting - Div mit JavaScript ein- ausblenden

Mithilfe von JavaScript können Sie Styleeigenschaften von Elementen einer Website verändern.
Somit können wir uns die Styleeigenschaft display zugute machen.
Wenn wir ein Element aus einer Website ausblenden wollen können wir dies mithilfe von

element {

  display:none;

}

Wenn wir ein Element mithilfe von JavaScript ansprechen wollen, dann wäre es besser wenn wir eine ID vergeben um das jeweilige Element anzusprechen.

document.getElementById('DieID').style.display = 'none';

Nun wissen wir wie wir Elemente ausblenden.
Einblenden lassen sich die Elemente z.B. wie folgt

element {

  display:block;

}

oder mit JavaScript

document.getElementById('DieID').style.display = 'block';

Die Funktion

Nun kommen wir zur Funktion welche uns Elemente je nach Wunsch ein oder ausblendet.

function div(what) {



	// Wir packen uns den Div in eine Variable

	var div = document.getElementById(what).style;



	// Wenn der Div ausgeblendet ist dann zeigen wir ihn

	if(div.display == 'none') {

		div.display = 'block';

	}



	// Falls er schon eingeblendet ist blenden wir ihn aus

	else {

		div.display = 'none';

	}



}

In dieser Funktion holen wir uns nun immer den jeweiligen Wert der display - Eigenschaft eines Elements und teilem dem Element dann den Gegenwert zu.
Kurz gesagt. Ist ein Element eingeblendet so wird es ausgeblendet.
Ist ein Element ausgeblendet so wird es eingeblendet.

Information

Autor: Wolfi

Kategorie: Browser Scripting

Titel: Div mit JavaScript ein- ausblenden

Veröffentlicht am: 26.05.09