JavaScript/DOM/Element/style

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

Mit der Element.style-Eigenschaft können Sie den inline-Style eines Elements setzen oder auslesen, indem Sie diesem Style-Objekt Eigenschaften und Werte zuweisen. Dieses kann durch die Entwicklertools als Änderung im style-Attribut des entsprechenden Elements untersucht werden.

  • 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.


Beachten Sie: Sie können prinzipiell alle CSS-Eigenschaften dynamisch ändern, beachten Sie dabei jedoch, dass die CSS-Eigenschaften in JavaScript in der sogenannten CamelCase-Schreibweise notiert werden müssen.
So wird z.B. border-radius zu borderRadius.

Anwendungsbeispiele[Bearbeiten]

Farbwähler[Bearbeiten]

Beispiel: Farbauswähler ansehen …
  <h2>Vordergrund (Schriftfarbe)</h2>
  <form action="#">
    <input type="color" name="text" value="#3983ab">
  </form>
  <h2>Hintergrund</h2>
  <form action="#">
    <input type="color" name="background" value="#ffffff">
  </form>  
  
  <output>
  </output>
Der Farbwähler besteht aus zwei Eingabefeldern. Daneben gibt es ein output-Element für die Ergebnisausgabe.
document.addEventListener("DOMContentLoaded", function () {   
  	 document.querySelector('[name="text"]').addEventListener('change', changeStyle);
  	 document.querySelector('[name="background"]').addEventListener('change', changeStyle);	 

function changeStyle() {
	var output = document.querySelector('output');	
	output.style.color = document.querySelector('[name="text"]').value;
	output.style.backgroundColor = document.querySelector('[name="background"]').value;		
}
});
Sobald etwas eingegeben wird, feuert der change-Event und die eingegebenen Werte werden mit element.style im output-Element ausgegeben.

Überholt: Stylewechsler[Bearbeiten]

In der Vergangenheit wurde Element.style dazu missbraucht, HTML-Dokumente zu formatieren.

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 Beispiel vorgestellt wird.
Beispiel: Veraltet: Setzen von style-Eigenschaften 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.

Dieses Beispiel ließe sich heute viel kürzer und übersichtlicher realisieren:

Beispiel: Ändern von Klassen ansehen …
    function ändereCSS () {
		var absätze = document.querySelectorAll('p'),
		    index;
		for (index = 0; index < absätze.length; index++) {
			absätze[index].classList.add('hervorhebung');
		}
	}
Mit querySelectorAll werden allle Absätze selektiert und in einer live nodelist hinterlegt.
In einer Schleife wird diesen Elementen nun mit classList.add die Klasse hervorhebung gegeben.

Überholt: Animationen[Bearbeiten]

Früher wurden Elemente animiert, indem die Werte von element.style laufend dynamisch verändert wurden. Dies geht heute mit der Web Animations API und Element.animate(), die CSS-Eigenschaften direkt animiert, besser:

Beispiel: element.animate() - Array von Objekten
element.animate([
  {transform: 'translate(  0px)', color: 'black'},
  {transform: 'translate(100px)', color: 'red'},
  {transform: 'translate(  0px)', color: 'black'},
  ], {
    duration: 1000,               // Zeit in Ms,
    iterations: Infinity,         // Wiederholungen (hier unendlich)
    delay: 300                    // Verzögerung
});

Fazit[Bearbeiten]

Was element.style nicht kann[Bearbeiten]

Mit element.style können Sie die style-Attribute von Elementen ändern, es ist auf diese Weise aber 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.

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]