dot style – Attribute mit Javascript ändern

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>

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.

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

Camel-Case

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
• backgroundColor
• backgroundImage
• borderBottomStyle
• borderRadius
• boxSizing
• flexDirection
• justifyContent
• paddingBottom

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.

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

/* 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

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

Familie und Kinder

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

Science Fiction

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

const acc = document.querySelectorAll(".accordion");

   for (let i = 0; i < acc.length; i++) {
      acc[i].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.

Besser classList oder className anstelle von elem . style

Sowohl elem .style als auch elem . setAttribut ("style","…") als auch elem.style.eigenschaft sind grundsätzlich nicht mehr empfehlenswert. Heute ist es effizienter, anstelle des style-Attributs die CSS-Klasse zu ändern. Die Methoden classList.add(), classList.remove() und classList.toggle() sind eleganter und flexibler.

In vielen Fällen – etwa bei Animationen – wird das Script darüber hinaus 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.