Javascript erhält Dokumentkoordinaten und Ansichtsfensterkoordinaten_Javascript-Fähigkeiten

Die Position eines Elements wird in Pixeln gemessen, wobei die X-Koordinate nach rechts zunimmt und die Y-Koordinate nach unten zunimmt. Allerdings gibt es zwei verschiedene Punkte als Ursprung des Koordinatensystems: die X- und Y-Koordinaten von Ein Element kann relativ zur oberen linken Ecke des Dokuments oder relativ zur oberen linken Ecke des Ansichtsfensters sein, in dem das Dokument angezeigt wird.

In bewerteten Fenstern und Registerkarten ist das „Ansichtsfenster“ nur der Teil des Browsers, der tatsächlich den Inhalt des Dokuments anzeigt: Es umfasst nicht die „Shell“ des Browsers (wie Menüs, Symbolleisten und Registerkarten).

Für das im Frame angezeigte Dokument wird das d5ba1642137c3f32f4f4493ae923989c-Element der Frame-Seite angegeben. In jedem Fall ist es bei der Diskussion der Position eines Elements wichtig zu klären, ob es sich bei den verwendeten Koordinaten um Dokumentkoordinaten oder Ansichtsfensterkoordinaten handelt. (Beachten Sie, dass Ansichtsfensterkoordinaten auch Fensterkoordinaten genannt werden)

Wenn das Dokument kleiner als das Ansichtsfenster ist oder noch kein Bildlauf erfolgt ist, ist die obere linke Ecke des Dokuments die obere linke Ecke des Ansichtsfensters und die Koordinatensysteme des Dokuments und des Ansichtsfensters sind identisch. Aber im Allgemeinen muss zur Konvertierung zwischen zwei Koordinatensystemen der Scroll-Offset addiert oder subtrahiert werden. Wenn beispielsweise die Y-Koordinate eines Elements in Dokumentkoordinaten 200 Pixel beträgt und der Benutzer im Browser 75 Pixel nach unten gescrollt hat, beträgt die Y-Koordinate des Elements in Ansichtsfensterkoordinaten 125 Pixel. Wenn die X-Koordinate eines Elements in Ansichtsfensterkoordinaten 400 Pixel beträgt und der Benutzer das Ansichtsfenster horizontal um 200 Pixel gescrollt hat, beträgt die X-Koordinate des Elements in Dokumentkoordinaten ebenfalls 600 Pixel.

Dokumentkoordinaten sind grundlegender als Ansichtsfensterkoordinaten und ändern sich nicht, wenn der Benutzer scrollt. Bei der clientseitigen Programmierung werden jedoch häufig Ansichtsfensterkoordinaten verwendet. Dokumentkoordinaten werden verwendet, wenn die Position von Elementen mithilfe von CSS angegeben wird. Aber die einfachste Möglichkeit, die Position eines Elements abzufragen: getBoundingClientRect() gibt die Position in Ansichtsfensterkoordinaten zurück. Wenn Sie eine Event-Handler-Funktion für ein Mausereignis registrieren, liegen die gemeldeten Koordinaten des Mauszeigers ebenfalls im Ansichtsfenster-Koordinatensystem vor.

Um in das Koordinatensystem zu transformieren, müssen wir die Position der Bildlaufleiste des Browserfensters bestimmen. Die Eigenschaften pageXoffset und pageYOffset des Window-Objekts stellen diese Werte in allen Browsern außer IE8 und früher bereit. IE (und alle modernen Browser) können die Position der Bildlaufleiste auch über die Eigenschaften scrollLeft und scrollTop ermitteln. Was verwirrend ist, ist, dass Sie diese Eigenschaften normalerweise erhalten, indem Sie den Stammknoten des Dokuments (document.documentElement) nachschlagen, aber im seltsamen Modus müssen Sie sie für das 6c04bd5ca3fcae76e30b72ad730ca86d-Element des Dokuments abfragen. Im Folgenden wird gezeigt, wie Sie die Position der Bildlaufleiste einfach abfragen können.

functon getScrollOffsets(w){
  w = w || window;
  var sLeft,sTop;
  if(w.pageXOffset != null) {
    sLeft = w.pageXOffset;
    sTop = w.pageYOffset;
    return {x:sLeft,y:sTop};
  }
  if(document.compatMode == "CSS1Compat"){
    sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft; 
    sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;  
    return {x:sLeft,y:sTop};
  }else if(document.compatMode == "BackCompat"){
    sLeft = document.body.scrollLeft; 
    sTop = document.body.scrollTop;
    return {x:sLeft,y:sTop};  
  }
}

Manchmal ist es nützlich, die Größe des Ansichtsfensters bestimmen zu können, um beispielsweise festzustellen, welcher Teil des Dokuments gerade sichtbar ist. Die einfache Methode, die Abmessungen des Ansichtsfensters mithilfe des Scroll-Offsets abzufragen, funktioniert in IE8 und früheren Versionen nicht, und die Funktionsfähigkeit der Technik im IE hängt davon ab, ob sich der Browser im seltsamen Modus oder im Standardmodus befindet.

Attribute unter Fenster:

innerHeight: Die Höhe des Fensterinhaltsteils einschließlich der Bildlaufleiste

innerWidth: Die Breite des Fensterinhaltsteils einschließlich der Bildlaufleiste

outerHeight: Die Höhe des gesamten Browsers, einschließlich aller Komponenten der Schnittstelle.

outerWidth: Die Breite des gesamten Browsers, einschließlich aller Komponenten der Schnittstelle.

pageXOffset: Die Position der X-Achse der Bildlaufleiste des Browserfensters

pageYOffset: Die Position der Y-Achse der Bildlaufleiste des Browserfensters

scrollX: Die Position der X-Achse der Bildlaufleiste des Browserfensters

scrollY: Die Position der Y-Achse der Bildlaufleiste des Browserfensters

Eigenschaften

document.documentElement document.body
clientHeight Die Größe des sichtbaren Inhalts im Ansichtsfenster, mit Ausnahme von Bildlaufteilen und Bildlaufleisten.
clientWidth
clientLeft　
clientTop
offsetHeight-Inhaltsgröße, einschließlich Bildlaufleisten.
offsetWidth
offsetLeft
offsetTop
scrollHeight Die Größe des Bildlaufinhalts, einschließlich des Bildlaufteils, jedoch ohne Bildlaufleiste.
scrollWidth
scrollTop
scrollWidth

Ansichtsfenstergröße des Abfragefensters:

function getViewportSize(w){
　　w = w || window;
　　var cWidth,cHeight;
　　if(w.innerWidth != null){
　　　　cWidth = w.innerWidht;
　　　　cHeight = w.innerHeight;
　　　　return {w:cWidth,h:w.cHeight};
　　}
　　if(document.compatMode == "CSS1Compat"){
　　　　cWidth = document.documentElement.clientWidth;
　　　　cHeight = doument.documentElement.clientHeight;
　　　　return {w:cWidth,h:w.cHeight};
　　}else if(document.compatMode == "BackCompat"){
　　　　cWidth = document.body.clientWidth;
　　　　cHeight = doument.body.clientHeight;
　　　　return {w:cWidth,h:w.cHeight};
　　}
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.