JQuery Kochbuch Jquery Community Experts

Prev Next

Ermitteln der Dimensionen eines Elements

Problem

Sie wollen den Platz ermitteln, der von einem Element beansprucht wird.

Lösung

Die Methoden width und height können auf jedes Element angewandt werden und sie sind nützlich, um die berechnete Breite oder Höhe eines Elements zu bestimmen. Allerdings greifen sie zu kurz, wenn Sie die tatsächlichen Ausmaße eines Elements auf dem Bildschirm bestimmen müssen. Neben width und height stellt jQuery noch folgende Methoden bereit, um spezifischere Dimensionen zu erhalten:

innerWidth

Gibt die Breite ohne Rand (Border), aber mit Abstand (Padding) zurück.

innerHeight

Gibt die Höhe ohne Rand, aber mit Abstand zurück.

outerWidth

Gibt die Breite sowohl mit Rand als auch mit Abstand zurück.

outerHeight

Gibt die Höhe sowohl mit Rand als auch mit Abstand zurück.

In Figure 6-2 sehen Sie alle Dimensionen dargestellt.

Figure 6-2. Darstellung von height, innerHeight und outerHeight eines Elements

Gehen wir einmal von folgendem HTML-Code aus:

<div id="results"></div>
<div id="myDiv">Irgendwelcher Text.</div>

und von diesem CSS-Code:

#myDiv {
    width:100px;
    height:30px;
    padding:10px;
    border:1px;
}

Dann können Sie folgende Ergebnisse erwarten:

jQuery(document).ready(function() {
    var $myDiv = jQuery('#myDiv');
    var $results = jQuery('#results');

    jQuery('<p>Computed width: ' + $myDiv.width() + '</p>')
        .appendTo($results); // 100
    jQuery('<p>Computed height: ' + $myDiv.height() + '</p>')
        .appendTo($results); // 30
    jQuery('<p>Inner width: ' + $myDiv.innerWidth() + '</p>')
        .appendTo($results); // 120
    jQuery('<p>Inner height: ' + $myDiv.innerHeight() + '</p>')
        .appendTo($results); // 50
    jQuery('<p>Outer width: ' + $myDiv.outerWidth() + '</p>')
        .appendTo($results); // 122
    jQuery('<p>Outer height: ' + $myDiv.outerHeight() + '</p>')
        .appendTo($results); // 52

    jQuery('<p>Document outer height: ' + jQuery(document).outerHeight() + '</p>')
        .appendTo($results); // NaN
    jQuery('<p>Document inner height: ' + jQuery(document).innerHeight() + '</p>')
        .appendTo($results); // NaN
    jQuery('<p>Window outer height: ' + jQuery(window).outerHeight() + '</p>')
        .appendTo($results); // NaN
    jQuery('<p>Window inner height: ' + jQuery(window).innerHeight() + '</p>')
        .appendTo($results); // NaN
});

Diskussion

Die Methoden innerWidth/innerHeight und outerWidth/outerHeight sind sehr hilfreich, um die Dimensionen zu bestimmen, die Sie interessieren – die grundlegenden Methoden für Breite und Höhe sind nicht so nützlich, wenn Sie versuchen, die tatsächliche Höhe und Breite herauszufinden, die ein Element mit Rahmen und Abstand auf dem Bildschirm einnimmt.

Beachten Sie, dass die Methoden innerWidth, innerHeight, outerWidth oder outerHeight für jQuery(document) oder jQuery(window) den Wert NaN zurückliefern.

Prev Next