JavaScript: Zusammenarbeit mit CSS, Darstellung von Dokumenten steuern

Einleitung

Mit JavaScript können Sie die Darstellung des Dokuments dynamisch ändern, während es im Browser angezeigt wird. Dies ist ein wesentlicher Bestandteil der Interaktivität, die Sie einem Dokument mittels Javascript hinzufügen können. Die Möglichkeiten sind vielfältig: Beispielsweise können Sie als Reaktion auf eine Eingabe gewisse Elemente ein- und ausblenden. Es sind aber auch – mit entsprechendem Aufwand – visuelle Effekte und komplexe Animationen möglich.

Die Programmiersprache JavaScript besitzt keine eigenen Techniken, um die Gestaltung einer Webseite zu beeinflussen. Vielmehr besitzt JavaScript eine Schnittstelle zur Formatierungssprache Cascading Stylesheets (CSS). Mittels JavaScript können Sie also sämtliche Formatierungen vornehmen, die CSS möglich macht. Daher sollten Sie die Grundlagen von CSS bereits beherrschen, bevor Sie Dokumente mittels JavaScript umformatieren.

Das dynamische Ändern der Darstellung bildet einen großen Komplex in der JavaScript-Programmierung - ein anderer ist das dynamische Ändern der Inhalte über das Document Object Model (DOM). Über das DOM können Sie Elemente hinzufügen oder löschen, Attributwerte setzen und Textinhalte einfügen oder verändern. In der Praxis gehen diese beiden Aufgaben - den Inhalt und dessen Darstellung modifizieren - oft miteinander einher.

Trennung von Layout-Regeln und JavaScript-Logik

Bevor Sie die verschiedenen Möglichkeiten kennenlernen, wie Sie ein Element CSS-Formatierungen mithilfe von JavaScript verändern können, sollten Sie sich die Konzepte des Unobtrusive JavaScript in Erinnerung rufen.

Wenn Sie bereits einige Layouts mit CSS umgesetzt haben, sollten Sie die Aufgaben der Webtechniken kennen und deren sinnvolle Anwendung bereits beherrschen:

• Für die Strukturierung der Inhalte ist HTML zuständig. Sie wählen möglichst bedeutungsvolle HTML-Elemente. Für die Feinstruktur vergeben Sie Klassen und IDs.
• Die Präsentation wird in ausgelagerten Stylesheets definiert. Diese sprechen gezielt Elemente im Dokument an und formatieren sie mit CSS-Eigenschaften. Elementnamen, IDs und Klassen bieten Angriffspunkte für CSS-Regeln.

Diese Arbeitsweise hat enorme Vorteile bei der Webseiten-Entwicklung. Inhalt und Präsentation können unabhängig voneinander geändert werden. Mit wenig Aufwand kann die gewünschte Präsentation erzielt werden.

Wenn nun die JavaScript hinzutritt, sollten Sie dieses Modell konsequent fortführen. Orientieren Sie sich an folgenden Faustregeln:

• Definieren Sie die Formatierungsregeln im Stylesheet, nicht im JavaScript. Trennen sie den CSS-Anweisungen vom JavaScript-Code.
• Sorgen Sie im JavaScript lediglich dafür, dass diese Formatierungsregeln angewendet werden – beispielsweise indem Sie einem Element eine Klasse hinzufügen. Durch diese Änderung der Klasse greift eine Regel im Stylesheet, deren Selektor die Klasse enthält.

Sie können nicht nur ausgelagerte CSS-Regeln auf ein Element anwenden, sondern auch direkt CSS-Eigenschaften von einzelnen Elementen ändern. Dies entspricht dem style-Attribut in HTML. Diese Vermischung von HTML und CSS bzw. JavaScript und CSS sollten Sie möglichst vermeiden. Diese Direktformatierung ist nur in Sonderfällen sinnvoll und nötig.

Stylesheet-Regeln auf ein Element anwenden

Eine einfache Methode, um die Darstellung von Elementen per JavaScript zu ändern, ist das Hinzufügen einer Klasse. Die Formatierungen für diese Klasse wird im Stylesheet untergebracht. Damit wird der empfohlenen Trennung vom JavaScript-Code Genüge getan.

Betrachten wir als Beispiel ein JavaScript, dass die Eingaben eines Formulars überprüft. Beim Absenden des Formulars wird eine Handler-Funktion für das Ereignis submit aktiv. Diese Funktion soll fehlerhafte Formularfelder rot markieren.

Nehmen wir an, die input-Eingabefelder sind standardmäßig im Stylesheet so formatiert:

input {
  padding: 4px 6px;
  border: 1px solid #555;
  background-color: #fafafa;
}

Im Stylesheet wird nun eine Regel definiert mit den Eigenschaften für fehlerhafte Felder. Wir nutzen dazu einen Selektor mit dem Elementnamen input kombiniert mit der Klasse fehlerhaft:

input.fehlerhaft {
   border-color: red;
   background-color: #fff8f5;
}

Am Anfang trifft der Selektor input.fehlerhaft auf kein Feld im Dokument zu. Um ein Eingabefeld umzuformatieren und die Regel anzuwenden, vergeben wir diese Klasse an das gewünschte input-Element.

Die Klassen eines Elements sind in JavaScript über die Eigenschaft classList des entsprechenden Elementobjekts zugänglich. classList ist listenartiges Objekt, das alle Klassen beinhaltet. Das Objekt bietet verschiedene Methoden an, um die Klassen eines Elements abzufragen und zu ändern.

Das Schema zum Hinzufügen einer Klasse lautet:

element.classList.add('klassenname');

Die beispielhafte Formularüberprüfung sieht so aus: Wir definieren eine Funktion formularÜberprüfung, die als Handler für das Ereignis submit registriert wird (siehe Ereignis-Verarbeitung). Die Funktion sucht das Formularfeld mittels document.getElementById(…) heraus. Ist der Wert des Feldes leer, wird eine Meldung ausgegeben und das Feld bekommt die Klasse fehlerhaft.

function formularÜberprüfung(event) {
  // Suche das Formularfeld heraus und
  // speichere es in eine Variable:
  var element = document.getElementById('kontaktformular-name');
  // Prüfe den Wert des Feldes:
  if (element.value === '') {
      // Zeige im Fehlerfall ein Hinweisfenster:
      window.alert('Bitte geben Sie Ihren Namen an.');
      // Weise dem Element die Klasse »fehlerhaft« zu:
      element.classList.add('fehlerhaft');
      // Setze den Fokus auf das Feld:
      element.focus();
      // Verhindere das Absenden des Formulars
      // (unterdrücke die Standardaktion des Ereignisses):
      event.preventDefault();
  }
}

// Überwache das submit-Ereignis beim Formular
document.getElementById('kontaktformular')
  .addEventListener('submit', formularÜberprüfung, false);

Der zugehörige HTML mit den nötigen IDs könnte so aussehen:

<form action="…" method="post" id="kontaktformular">
  <p>
    <label>
      Ihr Name:
      <input type="text" name="name" id="kontaktformular-name">
    </label>
  </p>
  … weitere Felder …
  <p><button>Absenden</button></p>
</form>

Das Hinzufügen der Klasse an einem Element ist nur eine minimale JavaScript-Änderung. Sie führt dazu, dass eine Regel aus dem Stylesheet auf bestimmte Elemente greift. Der Browser wendet daraufhin die definierten Formatierungen an.

Damit können Sie auch komplexere Aufgabenstellungen lösen, denn Ihnen stehen alle Möglichkeiten von CSS-Selektoren zu Verfügung. Beispielsweise können Sie mittels Nachfahrenselektoren Elemente formatieren, die unterhalb des mit der Klasse markierten Elements liegen. So können Sie durch das Ändern einer Klasse gleich mehrere, im DOM-Baum unterhalb liegende Elemente formatieren, ohne diese einzeln anzusprechen.

TODO: Beispiel dazu. Mit Nachfahrenselektoren größere Umformatierungen vornehmen, ohne alle Elemente einzeln anzusprechen

<p style="color: red; background-color: yellow; font-weight: bold;">Fehler!</p>

document.getElementById('beispielID').style.backgroundColor = 'red';

element.style.marginTop = 15; // Falsch!
element.style.marginTop = '15px'; // Richtig

<p id="ohne-inline-styles">Element ohne Inline-Styles</p>
<p id="mit-inline-styles" style="color: red">Element mit Inline-Styles</p>

// Gibt einen leeren String aus:
window.alert(
  document.getElementById('ohne-inline-styles').style.backgroundColor
);
// Gibt »red« aus, weil Inline-Style gesetzt wurde:
window.alert(
  document.getElementById('mit-inline-styles').style.backgroundColor
);

var element = document.getElementById('beispielID');
var computedStyle = window.getComputedStyle(element);
window.alert('Textfarbe: ' + computedStyle.color);
window.alert('Elementbreite: ' + computedStyle.width);

var element = document.getElementById('beispielID');
window.alert('Breite: ' + element.offsetWidth + ' Höhe: ' + element.offsetHeight);