Beim Erstellen einer Webseite müssen Sie manchmal die genaue Position eines Elements auf der Webseite kennen.
Das folgende Tutorial fasst die relevanten Kenntnisse von Javascript bei der Webseitenpositionierung zusammen.
1. Die Größe der Webseite und die Größe des Browserfensters
Zunächst müssen zwei Grundkonzepte geklärt werden.
Der gesamte Bereich einer Webseite ist ihre Größe. Typischerweise wird die Größe einer Webseite durch den Inhalt und CSS-Stylesheets bestimmt.
Die Größe des Browserfensters bezieht sich auf den im Browserfenster sichtbaren Bereich der Webseite, auch Viewport genannt.
Wenn der Inhalt der Webseite vollständig im Browserfenster angezeigt werden kann (d. h. es werden keine Bildlaufleisten angezeigt), sind die Größe der Webseite und die Größe des Browserfensters natürlich gleich. Wenn nicht die gesamte Seite angezeigt werden kann, scrollen Sie durch das Browserfenster, um Teile der Webseite anzuzeigen.
2. Ermitteln Sie die Größe der Webseite
Jedes Element auf der Webseite verfügt über die Attribute clientHeight und clientWidth. Diese beiden Attribute beziehen sich auf den visuellen Bereich, der vom Inhaltsteil des Elements plus Auffüllung eingenommen wird, mit Ausnahme des vom Rahmen und der Bildlaufleiste eingenommenen Platzes.
(Abbildung 1 clientHeight- und clientWidth-Eigenschaften)
Daher repräsentieren die Attribute clientHeight und clientWidth des Dokumentelements die Größe der Webseite.
Kopieren Sie den Codecode wie folgt:
Funktion getViewport(){
if (document.compatMode == "BackCompat"){
zurückkehren {
Breite: document.body.clientWidth,
Höhe: document.body.clientHeight
}
} anders {
zurückkehren {
Breite: document.documentElement.clientWidth,
Höhe: document.documentElement.clientHeight
}
}
}
Die obige getViewport-Funktion kann die Höhe und Breite des Browserfensters zurückgeben. Bei der Verwendung müssen Sie auf drei Dinge achten:
1) Diese Funktion muss nach dem Laden der Seite ausgeführt werden, andernfalls wurde das Dokumentobjekt nicht generiert und der Browser meldet einen Fehler.
2) In den meisten Fällen gibt document.documentElement.clientWidth den richtigen Wert zurück. Im Quirks-Modus von IE6 gibt document.body.clientWidth jedoch den korrekten Wert zurück, sodass die Beurteilung des Dokumentmodus zur Funktion hinzugefügt wird.
3) clientWidth und clientHeight sind beide schreibgeschützte Eigenschaften und können keinen Werten zugewiesen werden.
3. Eine andere Möglichkeit, die Größe einer Webseite zu ermitteln
Jedes Element auf der Webseite verfügt außerdem über die Eigenschaften scrollHeight und scrollWidth, die sich auf den visuellen Bereich des Elements einschließlich der Bildlaufleiste beziehen.
Dann entsprechen die Eigenschaften scrollHeight und scrollWidth des Dokumentobjekts der Größe der Webseite, also der gesamten Länge und Breite der Bildlaufleiste.
Nach der Funktion getViewport() kann die Funktion getPagearea() geschrieben werden.
Kopieren Sie den Codecode wie folgt:
Funktion getPagearea(){
if (document.compatMode == "BackCompat"){
zurückkehren {
Breite: document.body.scrollWidth,
Höhe: document.body.scrollHeight
}
} anders {
zurückkehren {
Breite: document.documentElement.scrollWidth,
Höhe: document.documentElement.scrollHeight
}
}
}
Allerdings gibt es bei dieser Funktion ein Problem. Wenn der Inhalt der Webseite ohne Bildlaufleisten vollständig im Browserfenster angezeigt werden kann, sollten clientWidth und scrollWidth der Webseite gleich sein. Tatsächlich haben verschiedene Browser jedoch unterschiedliche Verarbeitungsmethoden, und diese beiden Werte sind nicht unbedingt gleich. Daher müssen wir den größeren Wert davon nehmen und die Funktion getPagearea() neu schreiben.
Kopieren Sie den Codecode wie folgt:
Funktion getPagearea(){
if (document.compatMode == "BackCompat"){
zurückkehren {
Breite: Math.max(document.body.scrollWidth,
document.body.clientWidth),
Höhe: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} anders {
zurückkehren {
Breite: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
Höhe: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
4. Ermitteln Sie die absolute Position von Webseitenelementen
Die absolute Position eines Webseitenelements bezieht sich auf die Koordinaten der oberen linken Ecke des Elements relativ zur oberen linken Ecke der gesamten Webseite. Diese absolute Position kann durch Berechnung ermittelt werden.
Erstens verfügt jedes Element über die Attribute offsetTop und offsetLeft, die den Abstand zwischen der oberen linken Ecke des Elements und der oberen linken Ecke des übergeordneten Containers (offsetParent-Objekt) darstellen. Daher müssen Sie nur diese beiden Werte addieren, um die absoluten Koordinaten des Elements zu erhalten.
(Abbildung 2 offsetTop- und offsetLeft-Attribute)
Die folgenden zwei Funktionen können verwendet werden, um die Abszisse und Ordinate der absoluten Position zu erhalten.
Kopieren Sie den Codecode wie folgt:
Funktion getElementLeft(element){
varactualLeft = element.offsetLeft;
var current = element.offsetParent;
while (aktuell !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
returnactualLeft;
}
Funktion getElementTop(element){
varactualTop = element.offsetTop;
var current = element.offsetParent;
while (aktuell !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return currentTop;
}
Da in Tabellen und Iframes das offsetParent-Objekt nicht unbedingt dem übergeordneten Container entspricht, gilt die obige Funktion nicht für Elemente in Tabellen und Iframes.
5. Ermitteln Sie die relative Position von Webseitenelementen
Die relative Position eines Webseitenelements bezieht sich auf die Koordinaten der oberen linken Ecke des Elements relativ zur oberen linken Ecke des Browserfensters.
Mit der absoluten Position lässt sich leicht die relative Position ermitteln. Subtrahieren Sie einfach die Scrollstrecke der Bildlaufleiste der Seite von den absoluten Koordinaten. Der vertikale Abstand der Bildlaufleiste ist die scrollTop-Eigenschaft des Dokumentobjekts; der horizontale Abstand der Bildlaufleiste ist die scrollLeft-Eigenschaft des Dokumentobjekts.
(Abbildung 3 scrollTop- und scrollLeft-Attribute)
Schreiben Sie die beiden Funktionen im vorherigen Abschnitt entsprechend um:
Kopieren Sie den Codecode wie folgt:
Funktion getElementViewLeft(element){
varactualLeft = element.offsetLeft;
var current = element.offsetParent;
while (aktuell !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} anders {
var elementScrollLeft=document.documentElement.scrollLeft;
}
returnactualLeft-elementScrollLeft;
}
Funktion getElementViewTop(element){
varactualTop = element.offsetTop;
var current = element.offsetParent;
while (aktuell !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} anders {
var elementScrollTop=document.documentElement.scrollTop;
}
returnactualTop-elementScrollTop;
}
Den Attributen scrollTop und scrollLeft können Werte zugewiesen werden und sie scrollen die Webseite sofort automatisch an die entsprechende Position, sodass sie zum Ändern der relativen Position von Webseitenelementen verwendet werden können. Darüber hinaus hat auch die Methode element.scrollIntoView () einen ähnlichen Effekt, der dazu führen kann, dass das Webseitenelement in der oberen linken Ecke des Browserfensters angezeigt wird.
6. Eine schnelle Möglichkeit, die Position eines Elements zu ermitteln
Zusätzlich zu den oben genannten Funktionen gibt es eine schnelle Möglichkeit, die Position von Webseitenelementen sofort zu ermitteln.
Das heißt, die Methode getBoundingClientRect() zu verwenden. Es gibt ein Objekt zurück, das vier Attribute enthält: links, rechts, oben und unten, die jeweils dem Abstand zwischen der oberen linken Ecke und der unteren rechten Ecke des Elements relativ zur oberen linken Ecke des Browserfensters (Ansichtsfenster) entsprechen.
Daher ist die relative Position von Webseitenelementen
Kopieren Sie den Codecode wie folgt:
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
Zusammen mit der Scrolldistanz können Sie die absolute Position ermitteln
Kopieren Sie den Codecode wie folgt:
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
Derzeit unterstützen IE, Firefox 3.0+ und Opera 9.5+ diese Methode, Firefox 2.x, Safari, Chrome und Konqueror jedoch nicht.