Maison > interface Web > js tutoriel > Comment jquery obtient-il la position d'un élément dans le navigateur ? Quelles sont les méthodes ?

Comment jquery obtient-il la position d'un élément dans le navigateur ? Quelles sont les méthodes ?

云罗郡主
Libérer: 2018-10-29 15:36:40
avant
3082 Les gens l'ont consulté

Comment jquery obtient-il la position d'un élément dans le navigateur ? Je crois que de nombreux amis qui viennent d'entrer en contact avec jquery se poseront de telles questions. Ce chapitre va vous présenter comment jquery obtient la position d'un élément dans le navigateur. Quelles sont les méthodes ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Récupérer l'objet (ajustement personnalisé pour ouvrir un nouvel élément de référence de fenêtre)

var obj = $(”#oButton”);
Copier après la connexion

Dans l'exemple, l'objet que j'obtiens est le bouton de la fenêtre pop-up, donc le nouveau la fenêtre créée sera basée sur le bouton. La position est ajustée pour que la nouvelle fenêtre créée dans l'instance affiche le coin inférieur droit du bouton.

2. Obtenez la position de l'élément objet (méthode offset())

var offset = obj.offset();
Copier après la connexion

Obtenez la position de l'élément objet, qui est en haut et à gauche de l'élément appelant. Les méthodes sont : offset.left et offset.top, vous pouvez connaître les positions gauche et supérieure de l'objet actuel.

3. Récupérer la largeur de l'élément objet (méthode width())

var right = offset.left+obj.width();
Copier après la connexion

Dans l'exemple, la position du coin inférieur droit de l'objet est obtenue et la position gauche de la nouvelle fenêtre est créée.

4. Récupérer la hauteur de l'élément objet (méthode height())

var down = offset.top+obj.height();
Copier après la connexion

Dans l'exemple, la position du coin inférieur droit de l'objet est obtenue et la position supérieure de la nouvelle fenêtre est créée.

5. Définissez les styles CSS et définissez respectivement la gauche et le haut.

‘left’:right,
‘top’:down,
Copier après la connexion

Faites attention aux valeurs de margin et de padding dans les styles CSS, ainsi qu'à la compatibilité des navigateurs IE et Firefox.

Sur la base de l'exemple ci-dessus, il est très simple pour jQuery d'obtenir la position, la hauteur et la largeur de l'élément, grâce aux méthodes intégrées offset(), width() et height(), nous pouvons réaliser notre. ajustement dynamique et fonction d'ouverture d'une nouvelle fenêtre.Pour d'autres applications étendues, la même chose est vraie, comprendre la méthode de jQuery pour obtenir la position, la hauteur et la largeur des éléments sera très pratique pour créer de nouveaux éléments et ajuster la position et la taille des éléments.

Ce qui précède est une introduction complète à la façon dont jquery obtient la position d'un élément dans le navigateur ? Quelles sont les méthodes si vous voulez en savoir plus sur le Tutoriel vidéo JavaScript, Veuillez faire attention au site Web PHP chinois.


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:lvyestudy.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal