Dans le processus de création d’une page Web, vous avez parfois besoin de connaître l’emplacement exact d’un élément sur la page Web.
Le didacticiel suivant résume les connaissances pertinentes de Javascript dans le positionnement de pages Web.
1. La taille de la page Web et la taille de la fenêtre du navigateur
Premièrement, deux concepts fondamentaux doivent être clarifiés.
La surface entière d’une page Web correspond à sa taille. Généralement, la taille d'une page Web est déterminée par le contenu et les feuilles de style CSS.
La taille de la fenêtre du navigateur fait référence à la zone de la page Web affichée dans la fenêtre du navigateur, également appelée fenêtre d'affichage.
Évidemment, si le contenu de la page Web peut être entièrement affiché dans la fenêtre du navigateur (c'est-à-dire qu'aucune barre de défilement n'apparaît), alors la taille de la page Web et la taille de la fenêtre du navigateur sont égales. Si la page entière ne peut pas être affichée, faites défiler la fenêtre du navigateur pour afficher différentes parties de la page Web.
2. Obtenez la taille de la page Web
Chaque élément de la page Web possède les attributs clientHeight et clientWidth. Ces deux attributs font référence à la zone visuelle occupée par la partie contenu de l'élément plus le remplissage, à l'exclusion de l'espace occupé par la bordure et la barre de défilement.
(Figure 1, propriétés clientHeight et clientWidth)
Par conséquent, les attributs clientHeight et clientWidth de l'élément document représentent la taille de la page Web.
Copiez le code comme suit :
fonction getViewport(){
if (document.compatMode == "BackCompat"){
retour {
largeur : document.body.clientWidth,
hauteur : document.body.clientHeight
}
} autre {
retour {
largeur : document.documentElement.clientWidth,
hauteur : document.documentElement.clientHeight
}
}
}
La fonction getViewport ci-dessus peut renvoyer la hauteur et la largeur de la fenêtre du navigateur. Lors de son utilisation, vous devez faire attention à trois choses :
1) Cette fonction doit être exécutée après le chargement de la page, sinon l'objet document n'a pas été généré et le navigateur signalera une erreur.
2) Dans la plupart des cas, document.documentElement.clientWidth renvoie la valeur correcte. Cependant, dans le mode bizarrerie d'IE6, document.body.clientWidth renvoie la valeur correcte, donc le jugement du mode document est ajouté à la fonction.
3) clientWidth et clientHeight sont toutes deux des propriétés en lecture seule et ne peuvent pas se voir attribuer de valeurs.
3. Une autre façon d'obtenir la taille d'une page Web
Chaque élément de la page Web possède également les propriétés scrollHeight et scrollWidth, qui font référence à la zone visuelle de l'élément, y compris la barre de défilement.
Ensuite, les propriétés scrollHeight et scrollWidth de l'objet document correspondent à la taille de la page Web, c'est-à-dire la longueur et la largeur totales de la barre de défilement.
Suite à la fonction getViewport(), la fonction getPagearea() peut être écrite.
Copiez le code comme suit :
fonction getPagearea(){
if (document.compatMode == "BackCompat"){
retour {
largeur : document.body.scrollWidth,
hauteur : document.body.scrollHeight
}
} autre {
retour {
largeur : document.documentElement.scrollWidth,
hauteur : document.documentElement.scrollHeight
}
}
}
Il y a cependant un problème avec cette fonction. Si le contenu de la page Web peut être entièrement affiché dans la fenêtre du navigateur sans barres de défilement, alors clientWidth et scrollWidth de la page Web doivent être égaux. Mais en réalité, les différents navigateurs ont des méthodes de traitement différentes, et ces deux valeurs ne sont pas forcément égales. Par conséquent, nous devons prendre la valeur la plus grande parmi elles, nous devons donc réécrire la fonction getPagearea().
Copiez le code comme suit :
fonction getPagearea(){
if (document.compatMode == "BackCompat"){
retour {
largeur : Math.max(document.body.scrollWidth,
document.body.clientWidth),
hauteur : Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} autre {
retour {
largeur : Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
hauteur : Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
4. Obtenez la position absolue des éléments de la page Web
La position absolue d'un élément de page Web fait référence aux coordonnées du coin supérieur gauche de l'élément par rapport au coin supérieur gauche de la page Web entière. Cette position absolue peut être obtenue par calcul.
Tout d'abord, chaque élément possède les attributs offsetTop et offsetLeft, qui représentent la distance entre le coin supérieur gauche de l'élément et le coin supérieur gauche du conteneur parent (objet offsetParent). Il suffit donc de cumuler ces deux valeurs pour obtenir les coordonnées absolues de l'élément.
(Figure 2, attributs offsetTop et offsetLeft)
Les deux fonctions suivantes peuvent être utilisées pour obtenir l'abscisse et l'ordonnée de la position absolue.
Copiez le code comme suit :
fonction getElementLeft(élément){
var actualLeft = element.offsetLeft;
var courant = element.offsetParent;
while (actuel !== null){
actualLeft += current.offsetLeft;
actuel = actuel.offsetParent ;
}
return actualLeft ;
}
fonction getElementTop(élément){
var actualTop = element.offsetTop;
var courant = element.offsetParent;
while (actuel !== null){
actualTop += current.offsetTop;
actuel = actuel.offsetParent ;
}
retourner actualTop ;
}
Étant donné que dans les tableaux et les iframes, l'objet offsetParent n'est pas nécessairement égal au conteneur parent, la fonction ci-dessus ne s'applique pas aux éléments des tableaux et des iframes.
5. Obtenir la position relative des éléments de la page Web
La position relative d'un élément de page Web fait référence aux coordonnées du coin supérieur gauche de l'élément par rapport au coin supérieur gauche de la fenêtre du navigateur.
Avec la position absolue, il est facile d'obtenir la position relative. Il suffit de soustraire la distance de défilement de la barre de défilement de la page aux coordonnées absolues. La distance verticale de la barre de défilement est la propriété scrollTop de l'objet document ; la distance horizontale de la barre de défilement est la propriété scrollLeft de l'objet document.
(Figure 3, attributs scrollTop et scrollLeft)
Réécrivez les deux fonctions de la section précédente en conséquence :
Copiez le code comme suit :
fonction getElementViewLeft(élément){
var actualLeft = element.offsetLeft;
var courant = element.offsetParent;
while (actuel !== null){
actualLeft += current.offsetLeft;
actuel = actuel.offsetParent ;
}
if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} autre {
var elementScrollLeft=document.documentElement.scrollLeft;
}
return actualLeft-elementScrollLeft ;
}
fonction getElementViewTop (élément) {
var actualTop = element.offsetTop;
var courant = element.offsetParent;
while (actuel !== null){
actualTop += current.offsetTop;
actuel = actuel.offsetParent ;
}
if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} autre {
var elementScrollTop=document.documentElement.scrollTop;
}
retourner actualTop-elementScrollTop ;
}
Les attributs scrollTop et scrollLeft peuvent se voir attribuer des valeurs et feront automatiquement défiler la page Web jusqu'à la position correspondante immédiatement, afin qu'ils puissent être utilisés pour modifier la position relative des éléments de la page Web. De plus, la méthode element.scrollIntoView() a également un effet similaire, qui peut faire apparaître l'élément de la page Web dans le coin supérieur gauche de la fenêtre du navigateur.
6. Un moyen rapide d'obtenir la position d'un élément
En plus des fonctions ci-dessus, il existe un moyen rapide d'obtenir immédiatement la position des éléments d'une page Web.
Il s'agit d'utiliser la méthode getBoundingClientRect(). Il renvoie un objet qui contient quatre attributs : left, right, top et bottom, qui correspondent respectivement à la distance entre le coin supérieur gauche et le coin inférieur droit de l'élément par rapport au coin supérieur gauche de la fenêtre du navigateur (viewport). .
Par conséquent, la position relative des éléments de la page Web est
Copiez le code comme suit :
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
Plus la distance de défilement, vous pouvez obtenir la position absolue
Copiez le code comme suit :
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
Actuellement, IE, Firefox 3.0+ et Opera 9.5+ prennent tous en charge cette méthode, mais pas Firefox 2.x, Safari, Chrome et Konqueror.