JavaScript/DOM/Element/style

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Element
Wechseln zu: Navigation, Suche

Das Objekt style regelt den Zugriff auf CSS/Eigenschaften für HTML-Elemente. Wenn Sie Eigenschaften ändern oder hinzufügen, werden diese im style-Objekt gespeichert. Dieses wird durch die Entwicklertools als Änderung im style-Attribut des entsprechenden Elements dargestellt. Auslesen können Sie auf diese Weise nur Werte von CSS-Eigenschaften, die zum Zeitpunkt der Abfrage im style-Attribut notiert oder im style-Objekt gespeichert sind. Zudem müssen es nicht die tatsächlichen Werte sein. Sie können alle CSS-Eigenschaften dynamisch ändern.

  • DOM 1.0
  • JavaScript 1.5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Syntax

Element.style.eigenschaft = 'wert';

  • eigenschaft: CSS-Eigenschaft
  • wert: Wert als Zeichenkette, die deshalb in einfachen oder doppelten Anführungszeichen gesetzt werden muss.

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
function ändereCSS () {
    for (var i = 0, p = document.getElementsByTagName("p"); i < p.length; i++) {
        p[i].style.border = "5px solid #c32e04";
	p[i].style.borderRadius = "10px";
        p[i].style.backgroundColor = "#dfac20";
        p[i].style.color = "#3983ab";
        p[i].style.fontSize = "200%";
    }
}
Das Beispiel enthält drei Textabsätze. Durch Anklicken des Buttons wird die Funktion ändereCSS() aufgerufen. Zunächst werden mit mit document.getElementsByTagName("p") alle p-Elemente des Dokuments ermittelt und in einem Array gespeichert. Anschließend wird in einer for-Schleife der Reihe nach auf alle p-Elemente zugegriffen. p[i].stylespricht die style-Eigenschaft an. Dahinter folgt die gewünschte CSS-Eigenschaft, ebenfalls durch einen Punkt-Operator abgetrennt. Dieser wird jeweils ein gültiger Wert zugewiesen.

Im Ergebnis dessen werden die style-Attribute der p-Elemente geändert. Deshalb ist es auf diese Weise nicht möglich, etwa Formatierungen für Pseudoelemente oder -klassen zu ändern. Bereits vorhandene Angaben im style-Attribut des betroffenen HTML-Elements zu anderen CSS-Eigenschaften werden nicht geändert, vorhandene Angaben zu denselben Eigenschaften werden überschrieben.

Sie können prinzipiell alle CSS Stylesheet-Angaben behandeln, beachten Sie dabei jedoch, dass die CSS-Eigenschaften in JavaScript in der sogenannten CamelCase-Schreibweise notiert werden müssen.

Empfehlung: Trennen Sie konsequent Markup (HTML), Präsentation (CSS) und Verhalten (JavaScript). Alle Angaben zur Darstellung sollten via CSS erfolgen. Bei Bedarf ändern Sie lediglich die Klassenzugehörigkeit der entsprechenden Elemente mithilfe der JavaScript-Eigenschaften Verzichten Sie auf das direkte Setzen von CSS-Eigenschaften mit JavaScript, wie es in diesem Artikel vorgestellt wird.

Auslesen von Style-Eigenschaften[Bearbeiten]

Beachten Sie: Mit element.style können Sie nur CSS-Eigenschaften abfragen, die im HTML-Quelltext im style-Attribut notiert sind oder per JavaScript im style-Objekt gesetzt wurden. Um auszulesen, welche Eigenschaften für ein Element aktuell gelten, verwenden Sie deshalb besser immer window.getComputedStyle.

Weblinks[Bearbeiten]