Das Aussehen der HTML Seite dynamisch per Stylesheets ändern
In diesem Tutorial wird gezeigt, wie man mit Javascript das Aussehen der HTML Seite dynamisch per Stylesheets ändert.
Diesbezüglich wird gezeigt, wie man einem sogenannten "Div-Layer" dynamisch die Hintergrundsfarbe ändert.
Das Endergebnis erzeugt diesen Effekt:
Die Hintergrundsfarbe des Vierecks ändern in:
Schwarz
Rot
Grün
Gelb
Wir fangen zunächst mit dem HTML-Code an:
Als erstes erstellen wir das Viereck mittels einem Div-Layer und geben diesem vordefinierte Styleangaben - die Breite, Höhe und einem Rahmen.
Code:
// width:200px; - Eine Breite von 200px
// height:200px; - Eine Höhe von 200px
// border:1px solid #808080 - Einen Rahmen mit 1px Breite und der Farbe #808080
// Da leere Div-Layer nicht Regelkonform sind, füllen wir es mit einem Leerzeichen
<div id="viereck" style="width:200px;height:200px;border:1px solid #808080;"> </div>
Nun haben wir schon einmal das Viereck und das sieht im Browser so aus:
Jetzt erzeugen wir die Linktexte, um die Javascript-Funktion später aufrufen zu können:
Wir geben dem Linktext auch hier eine Styleangabe mit der jeweiligen Farbe, die später das Viereck zugewiesen bekommt
(Dies dient lediglich zur Veranschaulichung)
Code:
// Noch ist das href="" leer
// wird aber im darauffolgenden Schritt gefüllt
<a href="" style="color:#000000;">Schwarz</a>
Jetzt haben wir einen schwarzen Linktext, jedoch noch ohne Verweis:
Nun erstellen wir eine Javascript-Funktion die später durch den Linktext aufgerufen werden soll:
Code:
<script type="text/javascript">
// Wir benennen die Funktion "hintergrundsfarbe_aendern" und übergeben der Funktion einen Parameter "farbcode"
function hintergrundsfarbe_aendern(farbcode) {
// Hier wird gesagt, was die Funktion machen soll
// Sie soll dem id="viereck" Element des Vierecks die Styleangabe background:#farbe zuweisen
document.getElementById('viereck').style.background = '#'+farbcode;
}
</script>
Um die Javascript-Funktion aufrufen zu können, geben wir nun den Verweis an, was zu tun ist, wenn man diesen Linktext drückt/klickt.
Code:
// In den schon geschriebenen Linktext füllen wir nun das href=""
// javascript: - Es handelt sich bei diesem Link um ein Javascript Funktionsaufruf
// hintergrundsfarbe_aendern(); - Ist der Name der Funktion
// '000000' - Ist der Parameter, der übergeben werden soll - In diesem Fall besitzt der Farbcode Schwarz
<a href="javascript:hintergrundsfarbe_aendern('000000');" style="color:#000000;">Schwarz</a>
Für alle weiteren Linktexte einfach den Farbcode eingeben, der als Parameter für die Funktion hintergrundsfarbe_aendern() übergeben wird.
Hier nochmal das Ganze zusammengefasst:
Code:
<script type="text/javascript">
function hintergrundsfarbe_aendern(farbcode) {
document.getElementById('viereck').style.background = '#'+farbcode;
}
</script>
Die Hintergrundsfarbe des Vierecks ändern in:<br />
<a href="javascript:hintergrundsfarbe_aendern('000000');" style="color:#000000;">Schwarz</a>
<a href="javascript:hintergrundsfarbe_aendern('FF0000');" style="color:#FF0000;">Rot</a>
<a href="javascript:hintergrundsfarbe_aendern('00FF00');" style="color:#00FF00;">Grün</a>
<a href="javascript:hintergrundsfarbe_aendern('FFF000');" style="color:#FFF000;">Gelb</a>
<div id="viereck" style="width:200px;height:200px;border:1px solid #808080;"> </div>
Das Endergebnis sieht folgendermaßen aus:
Viel Spaß beim Verwenden des Codes!
Bei Fragen oder Anregungen zu dieser Seite, steht dir das
Forum zur Verfügung.
Diese Seite wurde 964 mal angesehen.
