Sie wollen die Breite und Höhe von window und document in Pixeln ermitteln.

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
});

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