Hintergrundfarbe per Eingabe

Auf dieser Seite stelle ich Schritt für Schritt ein paar Möglichkeiten vor, wie man mit Textfeldern und Buttons in Formularen die Hintergrundfarbe ändert. Ich habe hier im Großen und Ganzen auf Erklärungen verzichtet, da alle Themen zuvor abgehandelt wurden. Zu jedem Beispiel habe ich den Javascript Quelltext nochmal extra beigefügt. Die Funktionen, zwischen den Script Tags aus dem Head Bereich erscheinen jeweils oberhalb des Formulars. Der Quelltext des Formulars steht darunter.

Die Hintergrundfarbe wird in Javascript mit folgendem Befehl geändert:
document.getElementsByTagName("body")[0].style.backgroundColor="00ff00";
Die Angabe erfolgt in Hexadezimal Werten, allerdings ohne das Gatterzeichen (#).
Der Wert muß in jedem Fall in Anführungszeichen stehen. In einigen Beispielen tut er das nicht, weil es sich um Zeichenketten handelt, die dynamisch konstruiert werden oder aus Textfeldern stammen.

Der Eingabewert eines Textfeldes namens meintextfeld aus dem Formular namens meinformular kann folgendermaßen zugewiesen werden:
document.meinformular.meintextfeld.value

---

Beispiel 1

function farbegreen() {
document.bgColor = "#E3DABB";
document.getElementsByTagName("body")[0].style.backgroundColor = document.bgColor;
document.form1.bgfarbe.value = document.bgColor;
}

---

Buttonklick ändert die Farbe, dann erscheint sie im Textfeld als Hexadezimalwert.

---

<form name="form1">
<input type="text" name="bgfarbe" size="10">
<input type="button" value="Farbe beige" onClick="farbegreen()">
</form>

---

Beispiel 2

function eingabefarbe() {
document.getElementsByTagName("body")[0].style.backgroundColor=document.form2.farbfeld.value;
document.form1.bgfarbe.value=document.getElementsByTagName("body")[0].style.backgroundColor;
}

---

Gebe hier einen Hexadezimalwert für die Hintergrundfarbe ein, z.B.: #C0FFEE #BACAD1 #CACCA0 #5AEFDE
Beachte, dass oben im ersten Textfeld die Farbe angezeigt wird.

---

<form name="form2">
<input type="text" name="farbfeld" size="10">
<input type="button" value="Hexwert eingeben" onClick="eingabefarbe()">
</form>

---

Beispiel 3

function graustufen() {
var grau = document.form3.graufeld.value;
document.getElementsByTagName("body")[0].style.backgroundColor = "rgb("+ grau +"%,"+ grau +"%, " +grau+"%)";
}

---

Gebe hier eine Graustufe von 1 bis 100 ein.

---

<form name="form3">
<input type="text" name="graufeld" size="5">
<input type="button" value="Graustufe eingeben" onClick="graustufen()">
</form>

Erklärung:
Dieses Beispiel war vor kurzem noch eine sehr komplizierte Angelegenheit. Auch das Eingeben mittels RGB Werten oder HSB Werten setzte ?u?erst komplizierte Berechnungen voraus. Dank der CSS3 Farbwerte ist das nun kein Problem mehr, auch Transparenzwerte kann man hier einsetzen.

---

Beispiel 4

function rgbfarben() {
var rot= document.form4.rfeld.value;
var gruen = document.form4.gfeld.value;
var blau = document.form4.bfeld.value;
document.getElementsByTagName("body")[0].style.backgroundColor = "rgb("+ rot +"%,"+ gruen +"%, " +blau+"%)";
}

Erkl?rung:

So sah die Programmierung aus, bevor mit der CSS3 Farbwertzuweisung mittels rgb eine Farbe bestimmen konnte.

function rgbfarben() {
var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var r1 = 0, r2 = 0, g1 = 0, g2 = 0, b1 = 0, b2 = 0;

for(r = 0; r < document.form4.rfeld.value; r++){
r2 = r2 + 1;
if(r2 % 16 == 0) {
r2 = 0;
r1 = r1 + 1;
}
}

for(g = 0; g < document.form4.gfeld.value; g++){
g2 = g2 + 1;
if(g2 % 16 == 0) {
g2 = 0;
g1 = g1 + 1;
}
}

for(b = 0; b < document.form4.bfeld.value; b++){
b2 = b2 + 1;
if(b2 % 16 == 0) {
b2 = 0;
b1 = b1 + 1;
}
}

document.getElementsByTagName("body")[0].style.backgroundColor = X[r1] + X[r2] + X[g1] + X[g2] + X[b1] + X[b2];
}

---

Gebe hier in die Farbfelder jeweils RGB-Werte von 0 bis 255 ein.

 Rot    Grün    Blau

---

<form name="form4">
<input type="text" name="rfeld" size="5">
<input type="text" name="gfeld" size="5">
<input type="text" name="bfeld" size="5">
<input type="button" value="RGB eingeben" onClick="rgbfarben()">
</form>

---

es folgt ein Linkmenue mit einer Formular Auswahlliste

 

Javascript Tipps