mathefritz: thin, medium, thick ? wieviel pixel ?

wenn im style, u.A. border: 3px solid black und border-left: dotted steht

erhalte ich medium bei Abfrage der border-left-width statt der erwarteten 3 oder 3px . wie ist das umzurechnen?

getBoundingClientRect gibt ja width und height inclusive border zurück und wenn eine function bezüglich der Box als Parameter nur die Referenz auf diese bekommt ( vernünftigerweise) und nur den Inhaltsbereich bearbeiten soll, braucht sie diese Umrechnung .

Gibt denn eigentlich getBoundingClientRect immer für y denselben Wert wie für top, für x immer denselben wie für left zurück ?

  1. @@mathefritz

    wenn im style, u.A. border: 3px solid black und border-left: dotted steht

    erhalte ich medium bei Abfrage der border-left-width statt der erwarteten 3 oder 3px .

    Ich nicht.

    Sag bloß nicht, wie du die Abfrage machst, welchen Browser du verwendest, wo dein Beispiel online zu sehen ist … es könnte ja sein, dass jemand dein Problem nachvollziehen könnte.

    Du bist doch nicht zum ersten Mal hier.

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. <!DOCTYPE HTML><html lang="de"><head><meta charset="utf-8">
      
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title></title>
          <style>
           #B1 { border:3px solid black; display:inline-block;
                     border-left: dotted;}
          </style>
        </head>
        <body>
      A<br>B<br>C<br>D<br></div> <!--
      <div id = "B1"> -->
      <div id="B1" style="border:3px solid black; display:inline-block;
                     border-left: dotted;">
      -->Text Text Text Text Text<br> Text Text Text
      </div>
      <script>
        B1 = document.getElementById('B1');
      
      console.log(B1.style['border-left-width']);
      </script>
      
      </body></html>
      

      ok, Firefox zeigt 'medium', chrom zeigt 'initial' ;

      peinlich ist mir daß im Stylesheet für id="B1" noch irgendein Fehler steck, mit dem ist die Ausgabe leer.

      1. @@mathefritz

        <div id="B1" style="border:3px solid black; display:inline-block;
                       border-left: dotted;">
        -->Text Text Text Text Text<br> Text Text Text
        </div>
        <script>
          B1 = document.getElementById('B1');
        
        console.log(B1.style['border-left-width']);
        </script>
        

        ok, Firefox zeigt 'medium', chrom zeigt 'initial' ;

        AFAIS hat Firefox recht, weil medium exakt der Wert ist, auf den du border-left-width gesetzt hast. [MDN:border-left]

        peinlich ist mir daß im Stylesheet für id="B1" noch irgendein Fehler steck, mit dem ist die Ausgabe leer.

        Natürlich. Im style-Objekt steht nur das, was du mit JavaScript dort reingeschrieben hast oder was in Inline-style-Attributen angegeben ist. (Weder das eine noch das andere sollte man tun!)

        Wenn du die aus dem Stylesheet berechneten Werte haben möchtest: window.getComputedStyle().getPropertyValue() [MDN:getComputedStyle]

        LLAP 🖖

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

          Im WikiArtikel klappt es aber auch ohne getPropertyValue aber offenbar nicht immer - wann also?

          <!DOCTYPE HTML><html lang="de"><head><meta charset="utf-8">
          
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title></title>
              <style>
               #B1 { border:3px solid black; display:inline-block;
                border-left: dotted;
                       font: italic 1.5em Arial, sans-serif;
               }
              </style>
            </head>
            <body>
          A<br>B<br>C<br>D<br>
          <div id = "B1">
          Text Text Text Text Text<br> Text Text Text
          </div>
          <script>
            B1 = document.getElementById('B1');
          
            sty = window.getComputedStyle(B1,null);
            console.log(
            'border-right-width: '+sty.getPropertyValue
                                       ('border-right-width')+"\n", // wird
            '             width: '+sty.width + "\n",                // wird angezeigt
            '         font ohne: '+sty.font  + "\n",                // wird nicht
            '          font mit: '+sty.getPropertyValue('font')     // wird nicht
            )
          </script>
          
          </body></html>
          
          

          Zu Anfang fragte ich auch:

          Gibt denn eigentlich getBoundingClientRect immer für y denselben Wert wie für top, für x immer denselben wie für left zurück ?

          1. @@mathefritz

            Im WikiArtikel klappt es aber auch ohne getPropertyValue

            Ich kann jetzt auch keinen Unterschied zwischen CSSStyleDeclaration.getPropertyValue(propertyName) und CSSStyleDeclaration[propertyName] feststellen.

            Ich vermute, getPropertyValue() ist einfach ein API für CSSStyleDeclaration und tut nichts weiter als:

            CSSStyleDeclaration.prototype.getPropertyValue = function(propertyName)
            {
            	return this[propertyName];
            }
            

            aber offenbar nicht immer - wann also?

            Hm, Firefox liefert nur Werte für einfache Eigenschaften wie padding-left, aber nichts für zusammengesetzte Eigenschaften wie padding. Ich halte das für einen Bug.

            Spielwiese

            LLAP 🖖

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