elem.style – CSS mit Javascript ändern

Javascript dot style – CSS ändern und erzeugen

elem.style.eigenschaft liest und setzt CSS-Stile eines Elements, elem.style hingegen setzt oder überschreibt das style-Attribut eines Elements in gleicher Weise wie elem.setAttribute () bzw. elem.getAttribute (). elem.style.eigenschaft ist die älteste Technik und nicht ohne Tücken

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

CSS dynamisch ändern

CSS kommt aus der CSS-Datei, aus style-Elementen im head der Seite und aus inline-Stilen wie <elem style="background-color: red">. Darüber hinaus setzt Javascript mit elem.style.eigenschaft die Werte von Stilen dynamisch, z.B. als Antwort auf eine Aktion des Benutzers.

elem.style.eigenschaft = "neuer Stil";
<button id="myButton" style="padding:1em; border-width: 4px">Klick!</button>

elem.style überschreibt das style-Attribut. Damit ein eventuell vorhandenes style-Attribut nicht einfach überschrieben wird, fügen Anweisungen wie elem.style.color oder elem.style.width Eigenschaften dynamisch ein, ohne vorhandene Stile zu überschreiben.

Hier lauter eine Fehlerquelle: Die Namen von CSS-Eigenschaften wie background-color müssen in Camel Case geschrieben werden: backgroundColor

const elem = document.querySelector("#myButton");
elem.addEventListener ("click", function () {
	this.style.borderColor = "blue";
});

cssText – flexibler als elem.style.xy

Wenn mehr als eine Eigenschaft geändert wird, braucht elem.style.xy viele Zeilen. Eleganter und gut lesbar ist elem.style.cssText.

Demo Demo Demo
<img class="gallery" src="cake.webp" style="background: hsl(30,50%,80%)" width="300" height="300" alt="Demo">
const gallery = document.querySelectorAll ("img.gallery");
for (const elem of gallery) {
	elem.style.cssText += "border: 1px dotted firebrick; padding: 0.5rem";
}

Wer gerade von jQuery auf Vanilla Javascript umsteigt, darf nicht aus den Augen verlieren, dass $(".img") automatisch alle Bilder anspricht. Für reines Javascript hingegen muss eine Iteration (hier: elem of) alle Elemente anzusprechen.

Camel Case

elem.style übernimmt CSS-Eigenschaften wie width, border oder color wörtlich: elem.style.width, elem.style.border oder elem.style.color. Das macht das Ändern von CSS-inline-Stilen mit Javascript so schön einfach.

Da Javascript Bindestriche als Minuszeichen interpretiert, müssen die CSS-Eigenschaften bei der Übersetzung in DOM-Eigenschaft als Camel-Case geschrieben werden. Das heißt: Bindestrich fallen lassen und den ersten Buchstaben nach dem Bindestrich als Großbuchstabe setzen.

Das sind nur einige Beispiele von style-Eigenschaften, die im Camel Case geschrieben werden.

  • backgroundAttachment
  • backgroundImage
  • borderBottomStyle
  • borderRadius
  • flexDirection
  • justifyContent
  • paddingBottom

Als CamelCase werden auch Browser-Präfix-Eigenschaften mit großen Anfangsbuchstaben und ohne Bindestrich geschrieben.

  • webkitHyphens
  • webkitMinDevicePixelRatio

Die CamelCase-Schreibweise kam mit CSS2, war mal raus, ist wieder drin – getPropertyValue () ist also nicht erforderlich.

Beispiel: Javascript style für ein Akkordeon

Der Akkordeon-Effekt hier setzt auf CSS max-height: 0; overflow: hidden, um den Inhalt der Tafeln unter den Headern zu verbergen, und das Script setzt einen Inline-Stil mit elem.style.maxHeight, wenn ein Element angezeigt werden soll.

HTML für das Akkordeon
<div class="wrap">
   <div class="accordion">Sesame snaps croissant</div>
   <div class="board">
      <p>Cheesecake cake marshmallow … </p>
   </div>

   <div class="accordion"> Cotton candy powder </div>
   <div class="board">
      <p>Danish cake dragée sesame … </p>
   </div>

   …
</div>
CSS für das Akkordeon
/* Accordion-Blöcke, zu Anfang geschlossen durch max-height: 0 und overflow: hidden */
.board {
   padding: 0 18px;
   background-color: white;
   max-height: 0;
   overflow: hidden;
   transition: 0.5s ease-out;
}
Action und Abenteuer
video-mann-unter-feuer

Der abgewrackte Navy-Soldat Creasy übernimmt einen Bodyguard-Job in Mexiko.

Familie und Kinder
video-peanuts-der-film

Charlie Brown, Snoopy und Lucy haben ihren ersten Auftritt als computeranimierte Helden.

Science Fiction
Video Stargate Origins

1930 kämpfen Professor Langford und seine Tochter noch mit den Rätseln des antiken Artefakts.

const acc = document.querySelectorAll(".accordion");
for (const item of acc) {
	item.addEventListener("click", function() {
		this.classList.toggle("active");
		const board = this.nextElementSibling;
	 
		/** Gibt es schon ein style-Attribut mit max-height? **/
		if (board.style.maxHeight){
			board.style.maxHeight = null;
		} else {
		board.style.maxHeight = board.scrollHeight + "px";
		} 
	});
}

maxHeight ist die Eigenschaft, die der CSS-Eigenschaft max-height entspricht. Der erste Klick auf eine der Überschriften setzt ein style-Attribut mit einem Wert > 0 für max-height in das HTML-Element.

<div class="board" style="max-height: 223px;">
…
</div>

style-Attribut und Javascript style

Während elem.style.eigenschaft nur den Wert einer individuellen CSS-Eigenschaft wie width oder borderWidth setzt oder überschreibt, erzeugt elem.style ein style-Attribut oder überschreibt es.

<button id="myButton" style="padding:1em; border-width: 4px">Klick!</button>

Die Anweisung myButton.style = "border-color: blue" würde den alten Inhalt des style-Attributs löschen und durch den eigenen neuen Wert ersetzen.

classList anstelle von elem.style

Im Laufe der Zeit sind weitere Methoden hinzugekommen, die individuelle Stile von Elementen ändern oder alle CSS-Eigenschaften manipulieren können.

elem.style

Fügt ein style-Attribut ein oder ersetzt ein evtl. vorhandenes style-Attribut

elem.style = "background-color: blue"; 
Werte von CSS-Eigenschaften ändern

Setzt den Wert einer CSS-Regel, ohne ein evtl. vorhandenes style-Attribute zu ändern

elem.style.backgroundColor = "blue";	
cssText

Fügt mehrere Stile zum CSS eines Elements hinzu, ohne ein evtl. vorhandenes style-Attribute zu ändern

elem.style.cssText = `
	background-color: blue;
	border:2px solid gray;
`;
Regeln erweitern oder ersetzen

style-Attribut einfügen oder ein evt. vorhandenes style-Attribut ersetzen und mehrere Stile einfügen

elem.setAttribute ("style", "background: blue; border: 1px solid green");
style-Element erzeugen

Erzeugt ein style-Element, das vollständige CSS-Regeln aufnimmt, setzt auch Breakpoints und @-Regeln

const style = document.createElement ("style");
style.innerHTML = `
@supports ( display: flex ) {
		@media only screen and (max-width:1260px) { 
		h2 { 
			display: flex;
			flex-direction: column;
			height: ${foo}em;
		 } 
	}
}
body.append ("style");
`; 
stylesheets und insertRule, deleteRule

CSS auch in externen CSS-Dateien ändern – z.B. Breakpoints setzen und mit @-Regeln und kann Regeln entfernen

sheets[0].insertRule (`
@supports ( display: flex ) {
	@media only screen and (max-width:1260px) { 
		h2 { 
			display: flex;
			flex-direction: column;
			height: ${foo}em;
		 } 
	}
}
`);

Javascript classList

Anstelle von langatmigen Ergänzungen von CSS-Stilen ist es oft effizienter, CSS-Klassen zu ändern. Die Methoden des classList-Objekts add(), remove() und toggle() sind elegant und flexibel und classList.contains prüft, ob ein Element eine bestimmte Klasse enthält.

In vielen Fällen – etwa bei Animationen – wird das Script schneller, wenn nicht die Klassen von Elemente hinzugefügt oder entfernt werden, sondern wenn stattdessen mit insertRule und removeRule style-Elemente dynamisch erzeugt und im Seitenkopf eingefügt werden.