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

Den Offset eines Elements ermitteln
    Problem
    Sie wollen die Position eines Elements im Dokument herausfinden.
    Lösung
    jQuery stellt drei Methoden bereit, die beim Bestimmen der Position eines Elements helfen können:
    offset
Liefert ein Objekt mit der Position der oberen linken Ecke des Elements – relativ zur oberen linken Ecke des Dokuments.
    position
Liefert ein Objekt mit der Position der oberen linken Ecke des Elements – relativ zur oberen linken Ecke des ersten positionierten Eltern-Elements (der
offsetParent
).
    offsetParent
Liefert ein jQuery-Objekt zurück, dass den
offsetParent
des Elements enthält.
    Die Methode
offset
ist nützlich, wenn man die Position eines Elements auf der Seite bestimmen möchte – zum Beispiel, um das Fenster zu einem Element zu verschieben. Die Methode
position
hilft, Elemente neu zu positionieren und die Position eines Elements in einem scrollenden Container zu ermitteln. Beide Aufgaben werden im Folgenden noch besprochen werden – dieser Abschnitt soll als Überblick über die Positionierungs-Methoden dienen.
    Nehmen wir einmal den folgenden HTML-Code, bei dem das Element

einen 0-Pixel-Rahmen und einen Abstand von 10 Pixeln hat:

    

Den Offset eines Elements ermitteln

    

    

    Mit folgendem Code können Sie die Position, das Offset und den Offset-Parent der beiden
DIV
s ermitteln:
jQuery(document).ready(function() {
    var $foo = jQuery('#foo');
    var $bar = jQuery('#bar');

    var $results = jQuery('#results');
    var fooPosition = $foo.position();
    var barPosition = $bar.position();
    var fooOffset = $foo.offset();
    var barOffset = $bar.offset();

    var $fooOffsetParent = $foo.offsetParent();
    var $barOffsetParent = $bar.offsetParent();

    $results
     .append('

#foo position.top: ' + fooPosition.top + '

') // 10
     .append('

#foo position.left: ' + fooPosition.left + '

') // 10
     .append('

#bar position.top: ' + barPosition.top + '

') // 10
     .append('

#bar position.left: ' + barPosition.left + '

') // 10

     .append('

#foo offset.top: ' + fooOffset.top + '

') // 10
     .append('

#foo offset.left: ' + fooOffset.left + '

') // 10
     .append('

#bar offset.top: ' + barOffset.top + '

') // 10
     .append('

#bar offset.left: ' + barOffset.left + '

') // 10

     .append('

ID des offsetParent von #foo: '
     + $fooOffsetParent.attr('id')) // the_offset_parent
     .append('

ID des offsetParent von #bar: '
     + $barOffsetParent.attr('id')); // the_offset_parent
});
    In diesem Fall haben beide Elemente die gleiche Position und den gleichen
offsetParent
(das

-Element des Dokuments).
    Wird allerdings
#foo
per CSS positioniert

    

    

    ändern sich die Ergebnisse. Das
#foo
-
DIV
hat sich nicht bewegt und sein
offsetParent
ist auch kein anderer, daher bleiben Position und Offset gleich. Das
#bar
-
DIV
hat sich auch nicht bewegt, aber da sich dessen
offsetParent
geändert hat, ist auch die Position eine andere – vergessen Sie nicht, dass die Position eines Elements relativ zu seinem Offset-Parent angegeben wird.
jQuery(document).ready(function() {
    var $foo = jQuery('#foo');
    var $bar = jQuery('#bar');

    var $results = jQuery('#results');
    var fooPosition = $foo.position();
    var barPosition = $bar.position();
    var fooOffset = $foo.offset();
    var barOffset = $bar.offset();

    var $fooOffsetParent = $foo.offsetParent();
    var $barOffsetParent = $bar.offsetParent();

    $results
     .append('

#foo position.top: ' + fooPosition.top + '

') // 10
     .append('

#foo position.left: ' + fooPosition.left + '

') // 10
     .append('

#bar position.top: ' + barPosition.top + '

') // 0
     .append('

#bar position.left: ' + barPosition.left + '

') // 0

     .append('

#foo offset.top: ' + fooOffset.top + '

') // 10
     .append('

#foo offset.left: ' + fooOffset.left + '

') // 10
     .append('

#bar offset.top: ' + barOffset.top + '

') // 10
     .append('

#bar offset.left: ' + barOffset.left