Breite / Höhe div auslesen

[Linuchs]

Moin,

es will nicht gelingen,die Abmessung einer Fläche zu ermitteln:

#messe {
  margin-right: 1%;
  width: 99%;
  height: 30em;
  border: .1pt solid #ccc;
  border-radius: 5px;
  z-index: 0;
}
...
<div id="messe"></div>
<script>
  var messe_x = document.getElementById("messe").width;
  var messe_y = document.getElementById("messe").style.height;
  alert( "messe_x=["+messe_x+"] messe_y=["+messe_y+"]" );
...

Anzeige: messe_x=[] messe_y=[] sowohl bei .style.width als auch .width

Wie geht's richtig?

Linuchs

[Jonathan Harker]

Wiki ist dein Freund:

Beachten Sie: Mit element.style können Sie nur CSS-Eigenschaften definieren oder abfragen, die im style-Attribut notiert sind. Um auszulesen, welche Eigenschaften für ein Element außerdem gelten, verwenden Sie window.getComputedStyle.

getComputedStyle

Gruß Jo

[Gunnar Bittersmann]

@@Jonathan Harker

Wiki ist dein Freund

Nicht, wenn da Falsches drinsteht, wie dieses:

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

Welche Seite muss da berichtigt werden?

LLAP 🖖

[Julius]

Hallo Gunnar,

Wiki ist dein Freund

Nicht, wenn da Falsches drinsteht, wie dieses:

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

Welche Seite muss da berichtigt werden?

Anscheinend JavaScript/DOM/Element/style.

Gruß
Julius

[Gunnar Bittersmann]

@@Julius

Nicht, wenn da Falsches drinsteht, wie dieses:

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

Welche Seite muss da berichtigt werden?

Anscheinend JavaScript/DOM/Element/style.

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.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

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. Meines Wissens lassen sich mit element.style sehr wohl auch Eigenschaften setzen (also per JS), 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. Das muss aber nicht der angewendete Wert sein.

Bis demnächst
Matthias

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

[Matthias Apsel]

Hallo Gunnar Bittersmann,

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

Nein.

Doch.

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

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

divElement.style.backgroundColor = 'green';

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

Wenn du in den Inspektor guckst, stellst du fest, dass du in Zeile 2 den Wert des style-Attributs änderst.

Also vielleicht besser: „Beachten Sie: Mit element.style können Sie nur Werte von CSS-Eigenschaften abfragen, die zum Zeitpunkt der Abfrage im style-Attribut notiert sind. Das müssen allerdings nicht die [[CSS/Wertvarianten|tatsächlichen Werte]] sein. Um auszulesen, welche Eigenschaften für ein Element tatsächlich gelten, verwenden Sie window.getComputedStyle.“

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

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

Nein.

Doch.

Oh.

Wenn du in den Inspektor guckst, stellst du fest, dass du in Zeile 2 den Wert des style-Attributs änderst.

Genau genommen ändert man eine Eigenschaft des style-Objekts des Elementobjekts im DOM. (Und ja, das Entwicklertool stellt das als Attribut dar.)

Ich wäre aber vorsichtig mit der Formulierung „was im style-Attribut steht“. Das ist missverständlich. Für mich bezieht sich das auf den HTML-Quelltext.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ich wäre aber vorsichtig mit der Formulierung „was im style-Attribut steht“. Das ist missverständlich. Für mich bezieht sich das auf den HTML-Quelltext.

Was im HTML-Quelltext initial mal stand, ist eigentlich für die aktuelle Darstellung der Seite irrelevant.

Besser:

„Beachten Sie: Mit element.style können Sie nur Werte von CSS-Eigenschaften abfragen, die zum Zeitpunkt der Abfrage im style-Attribut notiert sind. Dabei ist es unwichtig, ob diese Werte bereits im HTML-Quelltext stehen oder später per JavaScript (element.style) verändert oder hinzugefügt wurden. Zudem müssen es nicht die [[CSS/Wertvarianten|tatsächlichen Werte]] sein. Um auszulesen, welche Eigenschaften für ein Element tatsächlich gelten, verwenden Sie window.getComputedStyle.“

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Besser:

Nö, IMHO.

„Beachten Sie: Mit element.style können Sie nur Werte von CSS-Eigenschaften abfragen, die zum Zeitpunkt der Abfrage im style-Attribut notiert sind.

Vielleicht ist es die Wortwahl: „notiert“. Notiert heißt geschrieben – vom Seitenautor im HTML-Quelltext.

Was JavaScript danach im DOM macht, ist nicht „notiert“, sondern gesetzt, geändert, überschrieben, …

Formulierung so?

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

Genau genommen müsste man sogar „per JavaScript im style-Objekt“ sagen, denn bei

var styleElement = document.createElement('style');
styleElement.innerText = 'div { background-color: green }';
document.head.appendChild(styleElement);

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

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

wird der Stil auch mit JavaScript gesetzt, landet aber nicht im style-Objekt.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Vielleicht ist es die Wortwahl: „notiert“. Notiert heißt geschrieben – vom Seitenautor im HTML-Quelltext.

Ok.

Genau genommen müsste man sogar „per JavaScript im style-Objekt“ sagen, denn bei

Mit dem genau genommen, gefällt es mir bisher am besten. Vielleicht noch hinzu, dass style-Objekt und style-Attribut einander entsprechen?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Mit dem genau genommen, gefällt es mir bisher am besten. Vielleicht noch hinzu, dass style-Objekt und style-Attribut einander entsprechen?

Ich würd’s an der Stelle nicht komplizierter machen als nötig. Eher deutlicher:

Mit element.style können Sie nur CSS-Eigenschaften abfragen, die per JavaScript im style-Objekt gesetzt wurden oder die im HTML-Quelltext im style-Attribut notiert sind. Um auszulesen, welche Eigenschaften für ein Element außerdem gelten, verwenden Sie deshalb besser window.getComputedStyle.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Mit element.style können Sie nur CSS-Eigenschaften abfragen, die per JavaScript im style-Objekt gesetzt wurden oder die im HTML-Quelltext im style-Attribut notiert sind. Um auszulesen, welche Eigenschaften für ein Element außerdem gelten, verwenden Sie deshalb besser window.getComputedStyle.

Jetzt könnte man denken, dass man mit getComputedStyle nur die rausbekommt, die nicht im style-Object stecken.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Mit element.style können Sie nur CSS-Eigenschaften abfragen, die per JavaScript im style-Objekt gesetzt wurden oder die im HTML-Quelltext im style-Attribut notiert sind. Um auszulesen, welche Eigenschaften für ein Element außerdem gelten, verwenden Sie deshalb besser window.getComputedStyle.

Jetzt könnte man denken, dass man mit getComputedStyle nur die rausbekommt, die nicht im style-Object stecken.

Könnte man? Finde ich nicht.

Noch ein Wort eingefügt:

Mit element.style können Sie nur CSS-Eigenschaften abfragen, die per JavaScript im style-Objekt gesetzt wurden oder die im HTML-Quelltext im style-Attribut notiert sind. Um auszulesen, welche Eigenschaften für ein Element gelten, verwenden Sie deshalb besser immer window.getComputedStyle.

LLAP 🖖

[Tabellenkalk]

Hallo,

hilft vielleicht ein „aktuell“?

… Um auszulesen, welche Eigenschaften für ein Element aktuell gelten, verwenden Sie deshalb besser immer window.getComputedStyle.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

hilft vielleicht ein „aktuell“?

… Um auszulesen, welche Eigenschaften für ein Element aktuell gelten, verwenden Sie deshalb besser immer window.getComputedStyle.

Find ich gut. Jetzt ha’m wa’s, oder?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Find ich gut. Jetzt ha’m wa’s, oder?

🙂

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Mit element.style können Sie nur CSS-Eigenschaften abfragen, die per JavaScript im style-Objekt gesetzt wurden oder die im HTML-Quelltext im style-Attribut notiert sind. Um auszulesen, welche Eigenschaften für ein Element außerdem gelten, verwenden Sie deshalb besser window.getComputedStyle.

Jetzt könnte man denken, dass man mit getComputedStyle nur die rausbekommt, die nicht im style-Object stecken.

Könnte man? Finde ich nicht.

Ich hatte nicht registriert, dass außerdem gestrichen wird. 😨

Bis demnächst
Matthias

[MudGuard]

Hi,

Mit element.style können Sie nur CSS-Eigenschaften abfragen, die per JavaScript im style-Objekt gesetzt wurden oder die im HTML-Quelltext im style-Attribut notiert sind. Um auszulesen, welche Eigenschaften für ein Element außerdem gelten, verwenden Sie deshalb besser window.getComputedStyle.

ich würd noch die Reihenfolge umdrehen. Wenn ein style-Attribut vorhanden ist, sind dessen Werte ja zuerst da, und erst später werden sie durch Javascript ggf. ersetzt/ergänzt (JS kann ja erst auf das Element bzw. dessen style-Objekt zugreifen, wenn das Element existiert).

cu,
Andreas a/k/a MudGuard

[Matthias Apsel]

Hallo Gunnar Bittersmann,

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

Nein.

Doch.

Oh.

Wenn du in den Inspektor guckst, stellst du fest, dass du in Zeile 2 den Wert des style-Attributs änderst.

Genau genommen ändert man eine Eigenschaft des style-Objekts des Elementobjekts im DOM. (Und ja, das Entwicklertool stellt das als Attribut dar.)

MDN: The HTMLElement.style property returns a CSSStyleDeclaration object that represents only the element's inline style attribute.

W3C: When you set the style of an element in this manner it is the same as if you were assigning it as a declaration in a style attribute of the html element.

Bis demnächst
Matthias

[Linuchs]

danke, klappt.

[Matthias Apsel]

Hallo Linuchs,

<div id="messe"></div>
<script>
  var messe_x = document.getElementById("messe").width;
  var messe_y = document.getElementById("messe").style.height;
  alert( "messe_x=["+messe_x+"] messe_y=["+messe_y+"]" );
...

Anzeige: messe_x=[] messe_y=[] sowohl bei .style.width als auch .width

width ist keine Eigenschaft eines DOM-Objects und style.width liest die Werte aus dem style-Attribut aus. Du möchtest Eigenschaften, die mit offset beginnen.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Linuchs

es will nicht gelingen,die Abmessung einer Fläche zu ermitteln

Guckst du: eigenschaften eines elements auslesen

LLAP 🖖