JQuery Kochbuch (German Edition)

wollen die Breite und Höhe von window und document in Pixeln ermitteln.
    Lösung
    Die jQuery-Methoden
width
und
height
ermöglichen einen einfachen Zugriff auf die grundlegenden Dimensionen von window oder document:
jQuery(document).ready(function() {
    alert('Window-Höhe: ' + jQuery(window).height()); // Höhe des Viewport
    alert('Window-Breite: ' + jQuery(window).width()); // Breite des Viewport

    alert('Document-Höhe: ' + jQuery(document).height()); // Höhe des Dokuments
    alert('Document-Breite: ' + jQuery(document).width()); // Breite des Dokuments
});
    Diskussion
    Es ist wichtig, zu wissen, dass sich die Breite und Höhe des Dokuments von der Breite und Höhe des Fensters unterscheiden kann (und sehr wahrscheinlich auch unterscheiden wird). Die Dimensionen des Fensters beziehen sich auf den Viewport – den Teil des Browsers, der ein Dokument anzeigen kann. Die Dimensionen des Dokuments beziehen sich auf die Größe des Dokuments selbst. In den meisten Fällen wird die Höhe des Dokuments größer sein als die des Fensters. Die Breite des Dokuments wird immer mindestens der des Fensters entsprechen, sie kann aber auch größer sein. In Figure 6-1 gilt
jQuery('body').width()
<
jQuery(document).width()
und
jQuery(document).width()
==
jQuery(window).width()
. Wäre die Breite des Bodys größer als die des Fensters, dann wäre auch die Dokumenten-Breite entsprechend größer.
    Figure 6-1. Die Größe von document und window unterscheiden sich häufig
    Den Methoden
width
und
height
kann man auch Argumente mitgeben, wenn Sie die Dimensionen eines Elements setzen wollen. Das Argument kann dabei ein Integer-Wert sein – dann wird es als Pixel interpretiert – oder ein String, wodurch es wie eine CSS-Maßeinheit interpretiert wird (also
$('#foo').width('300px')
).

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:


    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('

Computed width: ' + $myDiv.width() + '

')
     .appendTo($results); // 100
    jQuery('

Computed height: ' + $myDiv.height() + '

')
     .appendTo($results); // 30
    jQuery('

Inner width: ' + $myDiv.innerWidth() + '

')
     .appendTo($results); // 120
    jQuery('

Inner height: ' + $myDiv.innerHeight() + '

')
     .appendTo($results); // 50
    jQuery('

Outer width: ' + $myDiv.outerWidth() + '

')
     .appendTo($results); // 122
    jQuery('

Outer height: ' + $myDiv.outerHeight() + '

')
     .appendTo($results); // 52

    jQuery('

Document outer height: ' + jQuery(document).outerHeight() + '

')
     .appendTo($results); // NaN
    jQuery('

Document inner height: ' + jQuery(document).innerHeight() + '

')
     .appendTo($results); // NaN
    jQuery('

Window outer height: ' + jQuery(window).outerHeight() + '

')
     .appendTo($results); // NaN
    jQuery('

Window inner height: ' + jQuery(window).innerHeight() + '

')
     .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