Veränderte Größenangaben mit JavaScript ermitteln

Durch die CSS-Angaben max-width und max-height können Größenangaben von HTML-Elementen verändert werden. Um die veränderte Größe abzufragen, können dann die Eigenschaften clientWidth und clientHeight verwendet werden.

Das folgende Beispiel veranschaulicht den Sachverhalt.

Demo

<!DOCTYPE html>
<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8" />
    <style>
      #playground {
        width: 300px;
      }
 
      #playground img {
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="playground"></div>
    <script>
      window.onload = function() {
        var image = document.createElement('img');
        image.setAttribute('src', 'images/480_640.jpg');
        image.onload = function() {
          // Before: 480x640
          console.log('Before: ' + this.width + 'x' + this.height);
 
          var element = document.getElementById('playground');
          element.appendChild(this);
 
          // After 300x400 
          console.log('After: ' + this.clientWidth + 'x' + this.clientHeight);
        };
      };
    </script>
  </body>
</html>

Achtung:
Wurde die Größe eines Elementes nicht verändert, so liefern clientWidth und clientHeight jeweils die Zahl „0“ zurück. In diesem Fall müssen width und height abgefragt werden.

Tipp:
Um immer eine gültige Größenangabe zu haben, kann folgende Anweisung verwendet werden:

var width  = element.clientWidth || element.width;
var height = element.clientHeight || element.height;

Schreibe einen Kommentar Antworten abbrechen