Linuchs: Breite / Höhe div auslesen

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

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

    1. @@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 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. 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

        1. @@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 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. 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

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            1. @@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 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. 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

                --
                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                1. @@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 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                  1. 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

                    --
                    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                    1. @@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 🖖

                      --
                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                      1. 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

                        --
                        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                        1. @@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 🖖

                          --
                          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                          1. 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

                            --
                            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                            1. @@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 🖖

                              --
                              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                              1. Hallo,

                                hilft vielleicht ein „aktuell“?

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

                                Gruß
                                Kalk

                                1. @@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 🖖

                                  --
                                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                  1. Hallo Gunnar Bittersmann,

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

                                    🙂

                                    Bis demnächst
                                    Matthias

                                    --
                                    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                              2. 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

                                --
                                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                              3. 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

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

                    --
                    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    2. danke, klappt.

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

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  3. @@Linuchs

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

    Guckst du: eigenschaften eines elements auslesen

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory