JavaScript - Layout anpassen mit CSS

Den HTML-Elementen kann einmal durch das style-Attribut oder das class-Attribut CSS-Eigenschaften beziehungsweise eine CSS-Klasse zugewiesen werden.

verweis.setAttribute("style", "color:green");

ueberschrift.setAttribute("class", "FarbeUeberschrift");

DOM-Schnittstelle für CSS

Jedes HTMLElement-Objekt eines Dokuments besitzt eine Eigenschaft style, die die eingebetteten Stilattribute dieses Elements repräsentiert. Die Eigenschaft style verweist auf ein CSS2Properties-Objekt, das eine JavaScript-Eigenschaft für jedes vom CSS2-Standard definierte CSS-Stilattribut besitzt.

styleS.718 Das umfassende Referenzwerk

Cascading Style Sheet Attribut

Überblick

  • htmlElement.style

Eigenschaft

Das Style-Objekt hat Eigenschaften, die den vom Browser unterstützten CSS-Attributen entsprechen.

Beschreibung

Die Eigenschaft des Style-Objekts entsprechen unmittelbar den vom Browser unterstützen CSS-Attributen. Damit alles mit der JavaScript-Syntax kompatibel ist, werden allerdings CSS-Attributnamen, die Bindestriche enthalten, ohne Bindestrich und dafür mit großen Binnenbuchstaben geschrieben.

CSS2PropertiesS.774 Das umfassende Referenzwerk

Eigenschaften für alle CSS2-Attribute

Eigenschaften

Dieses Interface definiert viele Eigenschaften: eine für jedes in der CSS2-Spezifikation definierte CSS-Attribut. Die Eigenschaftsnamen sind eng an die CSS-Attributsnamen angelehnt. Geringfügige Abweichungen dienen nur zur Vermeidung von Syntaxfehlern im JavaScript. Attribute die aus mehreren Wörtern und Bindestriche enthalten, werden in JavaScript ohne Bindestrich geschrieben, und jedes Wort hinter dem ersten beginnt mit einem Großbuchstaben.

Beschreibung

Dieses Interface definiert für jedes von der CSS2-Spezifikation definierte CSS-Attribut eine Eigenschaft. Wenn die DOM-Implementierung dieses Interface unterstützt, implementieren alle CSSStyleDeclaration-Objekte auch CSS2-Properties. Das Lesen einer der in diesem Interface definierten Eigenschaft ist dasselbe, als würden Sie für das CSS-Attribut getPropertyValue() aufrufen, und das Setzen des Wertes einer solchen Eigenschaft ist dasselbe, als würden Sie setProperty() für das betreffende Attribut aufrufen.

classNameS.646 Das umfassende Referenzwerk

Ein les- und schreibbarere String, der den Wert des class-Attributs eines Elemntes enthält.

Überblick

  • htmlElement.className

CSS-Attribute verändern

Beispiel:

<script type="text/javascript">

window.onload = function() {

var absatzNeu = document.createElement("p");

var verweis = document.createElement("a");

verweis.setAttribute("href", "http:www.just-design.de");

verweis.setAttribute("style", "color:black");

// Zugriff auf das style-Attribut

verweis.style.backgroundColor = "silver";

// Zugriff auf die style-Eigenschaft des htmlElements

document.getElementById("Absatz2").className = "VordergrundGruen";

// Zugriff auf die className-Eigenschaft des htmlElements

var verweisText = document.createTextNode("just design");

verweis.appendChild(verweisText);

absatzNeu.appendChild(verweis);

var ueberschrift = document.createElement("h4");

var ueberschriftText = document.createTextNode("Diese h4-Überschrift wird von JavaScript erzeugt!");

ueberschrift.setAttribute("class", "FarbeUeberschrift");

// Zugriff auf das class-Attribut

ueberschrift.appendChild(ueberschriftText);

document.getElementById("ausgabe").insertBefore(ueberschrift, document.getElementById("Absatz"));

document.getElementById("ausgabe").appendChild(absatzNeu);

}

</script>

Ausgabe:

Im HTML-Code sind alle Texte blau!

Ich werde grün!

Ganz schön bunt hier

zurück