Service Tipps HTML CSS JavaScript PHP MySQL Webdesign Linkliste SiteMap

Dieses Eingabefeld ändert das Aussehen nachdem in einer Auswahlliste
eine andere Hintergrundfarbe oder Schriftgröße ausgewählt wurde.

Beispiel:

Schriftgröße: 9 10 11 12 13 14 15 16

Schriftfarbe: Schwarz Rot Blau Grün

Hintergrundfarbe: Weiß Grau Rot Blau Grün

Schriftart: Arial Verdana Times New Roman Courier New Tahoma

Eingabefeld-Größe: Auswahl Sehr klein Kleiner Mittel Größer Sehr Groß

Lorem ipsum dolor sit amet Semper lobortis risus sem eros eu sollicitudin tellus Vestibulum elit feugiat a tellus wisi malesuada volutpat lobortis in in felis Aenean tellus Morbi tempus Aliquam Vestibulum ipsum at nulla sapien elit pretium Maecenas Sed consectetuer semper in sit tellus Vestibulum urna vitae netus Sed odio mollis tortor ornare facilisis tincidunt.

Quelltext:

<script type="text/javascript">
function Textgroesse() {
 var groesse = document.Formel.Auswahl.options[document.Formel.Auswahl.selectedIndex].value+"px";
 document.getElementById("eingabe").style.fontSize=groesse;
}

function Schriftfarbe() {
 var groesse = document.Formel.Auswahl2.options[document.Formel.Auswahl2.selectedIndex].value;
 document.getElementById("eingabe").style.color=groesse;
}

function Hintergrundfarbe() {
 var hfarbe = document.Formel.Auswahl3.options[document.Formel.Auswahl3.selectedIndex].value;
 document.getElementById("eingabe").style.backgroundColor=hfarbe;
}

function Schriftart() {
 var font = document.Formel.Auswahl4.options[document.Formel.Auswahl4.selectedIndex].value;
 document.getElementById("eingabe").style.fontFamily=font;
}

function Feldgroesse() {
 var groesse = document.Formel.Auswahl5.options[document.Formel.Auswahl5.selectedIndex].value+"px";
 document.getElementById("eingabe").style.height=groesse;
}
</script>

<form name="Formel" action="" method="post">
<b>Schriftgröße:</b> 
<select name="Auswahl" size="1" onChange="Textgroesse();">
 <option value="9">9</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12" selected="selected">12</option>
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="154">15</option>
 <option value="16">16</option>
</select>
<br>

<b>Schriftfarbe:</b> 
<select name="Auswahl2" size="1" onChange="Schriftfarbe();">
 <option value="#000000" selected="selected">Schwarz</option>
 <option value="#FF0000">Rot</option>
 <option value="#0000FF">Blau</option>
 <option value="#00BF00">Grün</option>
</select>
<br>

<b>Hintergrundfarbe:</b>
<select name="Auswahl3" size="1" onChange="Hintergrundfarbe();">
 <option value="#FFFFFF" selected="selected">Weiß</option>
 <option value="#8C8C8C">Grau</option>
 <option value="#FFD8D8">Rot</option>
 <option value="#E5E5FF">Blau</option>
 <option value="#E0FFE0">Grün</option>
</select>
<br>

<b>Schriftart:</b>
<select name="Auswahl4" size="1" onChange="Schriftart();">
 <option value="Arial" selected="selected">Arial</option>
 <option value="Verdana">Verdana</option>
 <option value="Times New Roman">Times New Roman</option>
 <option value="Courier New">Courier New</option>
 <option value="Tahoma">Tahoma</option>
</select>
<br>

<b>Eingabefeld-Größe:</b> 
<select name="Auswahl5" size="1" onChange="Feldgroesse();">
 <option value="50" selected="selected"> Auswahl
 <option value="50"> Sehr klein
 <option value="100"> Kleiner
 <option value="150"> Mittel
 <option value="200"> Größer
 <option value="250"> Sehr Groß
</select>

<br><br>
<textarea cols="4"5 rows="5" id="eingabe">
   Lorem ipsum dolor ...
</textarea>
</form>

 Das könnte Sie interessieren:
JavaScript Grundkurs - 8. JavaScript schreibt!  Hintergrund-Bild je nach Auflösung - Je nach Auflösung wird ein Hintergrund-Bild für ...  Schriftgröße der Webseite mit JavaScript ändern  Banner mit Link in einem Textfeld zum kopieren ausgeben  Fenstergröße und Fensterposition mit einem Link ändern  Benutzereingaben mit JavaScript lokal speichern - HTML 5 bietet uns die Möglichkeit, mittels des localStorage oder sessionStorage einfache Daten im Client zu speichern.  Minirechner - Der warscheinlich kleinste Rechner der Welt ;-)  Farbverschiebungen - Mit dem Mauszeiger Farben verschieben.  Zwei Frames gleichzeitig ändern (2)  Kein Zurück - Zurück-Button ausschalten!  JavaScript Archiv: Diverses  Download & Play Button  Umleitung mit JavaScript - Ein kleines Script stellt fest, ob der Browser des Besuchers ...  …mehr