Wie man HTML-Elemente mittels CSS transparent machen kann habe ich ja bereits in diesem Artikel beschrieben. In diesem Artikel erkläre ich wie man mit JavaScript Elemente ein- und ausblenden kann. Solche Effekte eigenen sich sehr gut zum Beispiel für Bildergalerien, Fehlermeldungen oder dynamisch nachgeladene Inhalte.

Per JavaScript CSS-Eigenschaften verändern

Jedes erlaubte Attribut eines HTML-Elements stellt auch eine DOM-Eigenschaft dieses Elements dar. Der Zugriff auf die CSS-Eigenschaften eines Elements ist also über die Eigenschaft style möglich. Die einzelnen CSS-Eigenschaften sind wiederum Eigenschaften von style.

Ein Beispiel:

// Text im HTML-Element mit der ID beschreibung rot färben
document.getElementById('beschreibung').style.color = 'red';

Dabei muss man beachten das Eigenschaften die einen Bindestrich enthalten etwas anders geschrieben werden. Bei solchen Eigenschaften wird anstelle des Bindestrichs einfach der nächste Buchstabe großgeschrieben.

// text-decoration:line-through;
document.getElementById('beschreibung').style.textDecoration = 'line-through';

Deckkraft mit JavaScript ändern

Um die Deckkraft eines Elements mit JavaScript zu verändern muss man einfach über die style-Eigenschaft den entsprechenden CSS-Eigenschaften neue Werte zuweisen. MozOpacity für Mozilla, KhtmlOpacity für Webkit, filter für den Internet Explorer und opacity für neuere Browser. Folgende Funktion tut genau das. Der erste Parameter ist die ID des HTML-Elements dessen Deckkraft geändert werden soll und der zweite Parameter ist ein Wert von 0 (komplett durchsichtig) bis 100 (voll sichtbar).

function aendereDeckkraft(id, transparenz) {
	var style = document.getElementById(id).style;
	style.filter = "alpha(opacity=" + transparenz + ")";
	transparenz /= 100;
	style.opacity = transparenz;
	style.MozOpacity = transparenz;
	style.KhtmlOpacity = transparenz;
}

Filter erwartet einen Wert von 0-100, die anderen 3 Eigenschaften erwarten einen Wert zwischen 0 und 1. Deswegen wird der Wert der Variable transparenz durch 100 geteilt nachdem filter der neue Wert zugewiesen wurde.

Etwas langsamer

Es sieht natürlich viel besser aus wenn sich die Deckkraft nicht schlagartig ändert sondern langsam von einem Zustand in den anderen übergeht. Dazu verringert bzw. erhöht man einfach in kurzen Zeitabständen immer wieder die Deckkraft bis der gewünschte Wert erreicht ist. Dafür eignet sich die Funktion setTimeout recht gut.

function aendereSichtbarkeit(id, anfang, ende, zeit) {
	var schritte = Math.abs(anfang - ende);
	if (schritte == 0) return;
	var geschwindigkeit = Math.round(zeit / schritte);
	for (var i = 1; i <= schritte; i++) {
		if (anfang > ende) { var neu = anfang - i; }
		else { var neu = anfang + i; }
		setTimeout("aendereDeckkraft('" + id + "', " + neu + ")", (i * geschwindigkeit));
	}
}

Der erste Parameter der Funktion gibt wieder die ID des HTML-Elements an, Parameter 2 und 3 den Start- und Endwert für die Deckkraft und der vierte Parameter legt fest wie lange es dauern soll die Deckkraft zu ändern (in Millisekunden).

Verblassen, Sichtbar machen, Sichtbarkeit wechseln

Um ein Element verblassen zu lassen kann diese Funktion verwendet werden.

function verblassen(id, zeit) {
	var aktuell = aktuelleSichtbarkeit(id);
	aendereSichtbarkeit(id, aktuell, 0, zeit);
}

Die Funktion um ein Element wieder sichtbar zu machen ist ähnlich.

function sichtbarMachen(id, zeit) {
	var aktuell = aktuelleSichtbarkeit(id, 0);
	aendereSichtbarkeit(id, aktuell, 100, zeit);
}

Wenn man die Deckkraft wechseln möchte (nicht voll sichtbare Elemente werden zu 100% sichtbar, sichtbare werden unsichtbar), kann man diese Funktion benutzen:

function wechseln(id, zeit) {
	var aktuell = aktuelleSichtbarkeit(id);
 
	if (aktuell == 100) {
		aendereSichtbarkeit(id, 100, 0, zeit);
	}
	else {
		aendereSichtbarkeit(id, aktuell, 100, zeit);
	}
}

Die aktuelle Deckkraft eines Elements herausfinden

Will man herausfinden welche Deckkraft ein Element hat, kann diese Funktion benutzt werden.

function aktuelleSichtbarkeit(id, vorgabe) {
	var vorgabe = (vorgabe == null) ? 100 : vorgabe;
	var aktuell = parseFloat(document.getElementById(id).style.opacity);
	if (isNaN(aktuell)) { aktuell = vorgabe / 100; }
 
	aktuell = aktuell * 100;
	return aktuell;
}

Die Funktion überprüft allerdings nur die CSS-Eigenschaft opacity, wenn die Deckkraft vorher mit aendereDeckkraft geändert wurde funktioniert das immer, da die Funktion diese Eigenschaft verändert. Es gibt aber noch andere Möglichkeiten Elemente transparent/unsichtbar zu machen (visibility, oder proprietäre Eigenschaften wie -moz-opacity). Man sollte die Funktion also nur benutzen um die Deckkraft von Elementen abzufragen die mit den hier beschriebenen Funktionen geändert wurde. Wenn opacity keinen Wert hat wird, falls angegeben, der Wert des Parameters vorgabe zurückgegeben, ansonsten wird eine Deckkraft von 100% angenommen.

Beispielseite

Ich habe wieder eine Beispielseite eingerichtet auf der man die in diesem Artikel beschriebenen Effekte ausprobieren kann.

Zur Beispielseite

• Formulare: Datei-Element umgestalten
• CSS: DIV-Element mit 100% Höhe
• Fortschrittsbalken mit CSS/JavaScript
• Absenden, Zurücksetzen und Verlassen von Formularen
• Transparente Farben und Elemente mit CSS