Breite / Höhe div auslesen

[Gunnar Bittersmann]

@@Matthias Apsel

Beachten Sie: Mit element.style können Sie nur CSS-Eigenschaften definieren oder abfragen, die im style-Attribut notiert sind.

Heißt jetzt:

Mit element.style können Sie nur CSS-Eigenschaften abfragen definieren oder abfragen, die per JavaScript gesetzt wurden oder die im style-Attribut notiert sind.

Das sollte der Wahrheit näherkommen.

Nun ja. „abfragen abfragen“? Sicher nur ein Versehen.

Ja. Und nur hier. Im Wiki steht nur 1× „abfragen“.

Meines Wissens lassen sich mit element.style sehr wohl auch Eigenschaften setzen (also per JS)

Ja, klar. Aber die ursprüngliche Fassung besagte, dass sich nur solche Eigenschaften mit JS setzen lassen, die im style-Attribut notiert sind.

Und das Setzen ist unter der Überschrift „Auslesen von Style-Eigenschaften“ irrelevant.

die dann im style-Attribut landen und nicht angewendet werden müssen, etwa wenn es eine important-Regel gibt.

Es wird grundsätzlich das ausgelesen, was im style-Attribut steht.

Nein.

<div style="background-color: red"></div>

var divElement = document.querySelector('div');

divElement.style.backgroundColor = 'green';

console.log(divElement.style.backgroundColor); // "green"

Das muss aber nicht der angewendete Wert sein.

Das ist wieder richtig. Mit

div { background-color: blue !important }

ist der angewendete Wert blue; in der Konsole steht aber green.

Den angewendeten Wert bekommt man ausgegeben mit

console.log(window.getComputedStyle(divElement)['background-color']); // "rgb(0, 0, 255)"

LLAP 🖖