Javascript Crashkurs

Javascript Crashkurs

Elemente anquatschen

Der Hauptgrund warum Javascript wohl existiert, ist die Möglichkeit HTML Elemente im Nachhinein zu manipulieren. Aus diesem Grund darf natürlich ein eigener Abschnitt dafür nicht fehlen.

Farbe ändern

Wir haben ein DIV Element mit einer grauen Hintergrundfarbe. Das Element soll seine Farbe ändern, sobald der Mauszeiger drüber fährt.

<div onmouseover="this.style.backgroundColor='#000';"></div>

Einfach oder?

Es geht aber noch übersichtlicher und separierter.

<div id="box"></div>

<script>
document.getElementById("box").backgroundColor = "#000";
</script>

Das sieht zwar nach etwas mehr Aufwand aus, lohnt sich aber am Ende des Tages. Gerade wenn man mehr als nur die Hintergrundfarbe eines Elements ändern möchte, empfehle ich dass man immer mit der letzteren Version arbeitet. getElementById tut übrigens genau das, was der Name schon sagt, es holt sich ein Element durch die ID. Es gibt noch andere Wege Elemente beispielsweise durch den Tag (in diesem Fall DIV) oder durch ein anderes Attribut als ID zu selektieren.

Natürlich kann man mit Javascript mehr als nur das Aussehen eines Elements ändern.

Inhalte ändern

Man kann mit Javascript zum Beispiel auch Texte nachträglich verändern.

<span id="label">Super cooler Text!</span>

<script>
document.getElementById("label").text = "noch coolerer Text!";
</script>

Auch neue HTML Elemente können mit eingebaut werden.

<div id="text">Cooler text!</span>

<script>
document.getElementById("text").innerHTML = "<span style='color: red;'>Cooler</span> text!";
</script>
Hinterlasse gerne einen Like oder Kommentar (~‾▿‾)~
Name Text