Javascript dot style | mediaevent.de

Javascript ändert HTML-Attribute wie style, id und title auf dreierlei Weise: Mit setAttribute ('style','neu'), mit elem.style und elem.dataset.myAttribute. elem . style ist die älteste Technik, und nicht ganz ohne Tücken.

title, style und id sind Beispiele für Eigenschaften, die mit einem HTML-Attribut übereinstimmen und in nahezu jedem HTML-Tag vorkommen können. Sowohl setAttribute("id","neueId") als auch die ältere Technik elem.id = "neueId" erzeugen und ändern solche Attribute.

Meist verwendet ist sicher elem.style.

elem.style = "background: ivory; border: 1px solid silver;";

Macht dasselbe wie

elem.setAttribut ("style", "background: ivory; border: 1px solid silver;");

Beide Herangehensweisen erzeugen ein style-Attribut bzw. überschreiben ein bereits vorhandenes style-Attribut. Die ältere Methode elem.style wird allgemein bevorzugt, einerseits weil sie bequemer und kürzer ist, andererseits auch, weil alte Versionen des IE-Imperiums setAttribute nicht unterstützt haben.

Mein Bike

HTML und CSS

.bike { width: 240px; margin: 0 auto 2em auto; }
…
<h2 id="title">Mein Bike</h2>
<div class="bike" style="max-height:0;overflow:hidden">
    <img src="bike.jpg" />
</div>

Javascript

let bike = document.querySelector(".bike");
title.addEventListener ("click",function () {
   if (bike.style.maxHeight === "0px") {
      bike.style = "height:171px;width:240px;";
      title.innerHTML = "Verbergen";
   } else {
      bike.style = "max-height:0;overflow:hidden";
      title.innerHTML = "Mein Bike";
   }
});

document.querySelector(".bike").style rührt nicht an Eigenschaften, die in einem Stylesheet für die CSS-Klasse .bike vereinbart wurden. Was allerdings im style-Attribut des HTML-Tags notiert ist, wird vollkommen von der neuen style-Vereinbarung überschrieben. Dasselbe würde bei setAttribute ("style", newStyle) passieren.

document.querySelector(".bike").style liest das style-Attribut des HTML-Tags nicht wörtlich aus. Darum prüft das Script auf elem.style.maxHeight === "0px".

Individuelle CSS-Eigenschaften einfügen

Damit ein vorhandenes style-Attribut nicht einfach überschrieben wird, fügen Anweisungen wie elem.style.color oder elem.style.width Eigenschaften als inline-Stil ein, ohne vorhandene Stile zu überschreiben. 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.

Stile erhalten

title.style.border       = "2px solid darkorange";
title.style.borderRadius = "8px";

erzeugen neue Eigenschaften für das Element. Wenn schon ein style-Attribut vorhanden ist, werden die Stile hinzugefügt, ohne vorhandene Stile zu überschreiben.

<p style="border: 2px solid darkorange; border-radius: 8px;" class="title">Stile erhalten</p>

Hat die CSS-Eigenschaft einen Bindestrich (z.B. border-radius, counter-increment, font-family), muss sie im Camel-Case geschrieben werden, denn in Javascript ist der Bindestrich der Minus-Operator.

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

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.

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

for (var i = 0; i < acc.length; i++) {
   acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var 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>

Camel-Case

Da Javascript Bindestriche ablehnt, müssen die CSS-Eigenschaften bei der Übersetzung in DOM-Properties 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

Besser classList oder className anstelle von elem . style

Sowohl elem .style als auch elem . setAttribut ("style","…") als auch elem.style.property 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 deutlich schneller, wenn nicht die Klassen von Elemente hinzugefügt oder entfernt werden, sondern wenn stattdessen StyleSheets dynamisch erzeugt und eingefügt werden.