Service Tipps HTML CSS JavaScript PHP MySQL Webdesign Linkliste SiteMap

• CSS-Angaben mit JavaScript auslesen

Hintergrundfarbe auslesen (über ID)

<script type="text/javascript">
var farbe = document.getElementById("Bsp1").style.backgroundColor;
</script>

Eine kleine Funktion dazu:

<script type="text/javascript">
function hintergrundfarbeAuslesen() {
 var farbe = document.getElementById("Bsp1").style.backgroundColor;
 alert(farbe);
}
</script>

<span id="Bsp1" style="background-color: #80FF00;"> &nbsp; &nbsp; </span>

<input type="button" value="Hintergrundfarbe auslesen"
 onClick="hintergrundfarbeAuslesen();">

         

Der Internet Explorer und Opera zeigen die Farbe Hexadezimal an #80FF00.
Mozilla Firefox und Google Chrome zeigen die Farbe als RGB an rgb(128, 255, 0).

 

Textausrichtung auslesen (über ID)

<script type="text/javascript">
function textAlignAuslesen() {
 var text_align = document.getElementById("Bsp2").style.textAlign;
 alert(text_align);
}
</script>

<div id="Bsp2" style="text-align: right;"> Text </div>

<input type="button" value="Textausrichtung auslesen"
 onClick="textAlignAuslesen();">

Beachten Sie folgendes: textAlign JavaScript und text-align CSS haben unterschiedliche Schreibweisen, der Bindestrich in der JavaScript Anweisung entfällt, dafür wird der erste Buchstabe des zweiten Wortes großgeschrieben.
Weiter unten finden Sie eine » Liste der JavaScript Schreibweisen.

 

• CSS-Angaben mit JavaScript ändern

<script type="text/javascript">
document.getElementById("Bsp3").style.textAlign = "left";
</script>

Eine kleine Funktion dazu:

<script type="text/javascript">
function textAlignAendern() {
 if (document.getElementById("Bsp3").style.textAlign == "right") {
  document.getElementById("Bsp3").style.textAlign = "left";
 }
 else {
  document.getElementById("Bsp3").style.textAlign = "right";
 }
}
</script>

<div id="Bsp3" style="text-align: right;"> Text </div>
<input type="button" value="Textausrichtung ändern"
 onClick="textAlignAendern();">

 

Element anzeigen oder verstecken

<script type="text/javascript">
function View() {
 if (document.getElementById("Bsp4").style.display == "none") {
  document.getElementById("Bsp4").style.display = "block";
 }
 else {
  document.getElementById("Bsp4").style.display = "none";
 }
}
</script>

<input type="button" value="Anzeigen / Verstecken" onClick="View();">

<div id="Bsp4" style="display: none;"> Inhalt Inhalt Inhalt </div>

« Liste der JavaScript Schreibweisen

 

• Element über den Tag-Namen ändern

<script type="text/javascript">
document.getElementsByTagName("h3")[0].style.fontSize = "250%";
</script>

Eine kleine Funktion dazu:

<script type="text/javascript">
function fontsize() {
 if (document.getElementsByTagName("h3")[0].style.fontSize == "100%") {
  document.getElementsByTagName("h3")[0].style.fontSize = "250%";
 }
 else {
  document.getElementsByTagName("h3")[0].style.fontSize = "100%";
 }
}
</script>

<input type="button" value="Schriftgröße ändern" onClick="fontsize();">

<h3 style="font-size:100%;"> Inhalt 1 Inhalt 1 Inhalt 1</h3>
<h3 style="font-size:100%;"> Inhalt 2 Inhalt 2 Inhalt 2</h3>

Inhalt 1 Inhalt 1 Inhalt 1

Inhalt 2 Inhalt 2 Inhalt 2

Mit document.getElementsByTagName("h3")[0]. wird die erste H3-Überschrift auf der
Seite geändert.

Alle H3-Überschriften ändern

<script type="text/javascript">
function fontsizeAll() {
 var hDrei = document.getElementsByTagName("h3").length;
 for (var zaehler = 0; zaehler < hDrei; zaehler++) {
  document.getElementsByTagName("h3")[zaehler].style.fontSize = "250%";
 }
}
</script>

 

• Element über den Form-Namen ändern

<script type="text/javascript">
document.Formular.elements["text1"].style.fontWeight = "bold";
</script>

Eine kleine Funktion dazu:

<script type="text/javascript">
function font_weight() {
 if (document.Formular.elements["text1"].style.fontWeight == "normal") {
  document.Formular.elements["text1"].style.fontWeight = "bold";
 }
 else {
  document.Formular.elements["text1"].style.fontWeight = "normal";
 }
}
</script>

<form name="Formular" action="">
 <input type="button" value="Schriftgewicht ändern" onClick="font_weight();">
 <input type="text" name="text1" value="Testtext" style="font-weight: normal;"> 
</form>

 Das könnte Sie interessieren:
Checkbox und Radiobuttons mittels JavaScript überprüfen  Bei Bestätigung weiter - Nur wenn die Checkbox angeklickt wird, gelangt man mit dem Button auf die nächste Seite.  Seitennavigation mit Tasten  JavaScript Grundkurs - 6. Wie spät ist es?  Fehleingaben anzeigen- Fehleingaben in Eingabefeldern mit Bildern anzeigen. Dieses JavaScript überprüft ob eine Eingabe gemacht wurde und setzt hinter dem Eingabefeld ein entsprechendes Bild.  Statuszeilentext - Einmal etwas anderes als der nervige Statuszeilenticker :-)  JavaScript Bausteine 8  …mehr