Maison > interface Web > js tutoriel > Explication détaillée de la façon d'obtenir les valeurs de gauche et du haut à l'aide du code JavaScript

Explication détaillée de la façon d'obtenir les valeurs de gauche et du haut à l'aide du code JavaScript

巴扎黑
Libérer: 2017-08-14 13:51:20
original
2127 Les gens l'ont consulté

L'éditeur suivant vous proposera trois méthodes pour obtenir la valeur gauche et la valeur supérieure en js natif. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil

Lorsque vous utilisez js pour créer des effets dynamiques, vous devez généralement obtenir les valeurs d'attribut gauche et supérieure​​dans le positionnement absolu de l'élément. Par exemple, pour créer une annonce de collision, vous devez constamment obtenir les valeurs d'attribut supérieure et gauche de l'élément.

Choses à noter : L'élément qui prend la valeur doit définir l'attribut position:absolute Absolute Positioning afin d'obtenir la valeur de gauche.

La première méthode, est relativement simple, c'est-à-dire directement via obj.style.left et obj.style.top, mais elle a des limites. Cette méthode d'acquisition ne peut obtenir que les valeurs d'attribut gauche et supérieure du style en ligne, mais ne peut pas obtenir les valeurs d'attribut gauche et supérieure de la balise de style et lier des références externes.

La deuxième méthode est en lecture seule peut obtenir tous les styles. Il existe des problèmes de compatibilité dans les navigateurs standards, vous pouvez utiliser window.getComputedStyle(object, null. .left pour obtenir les valeurs d'attribut gauche et supérieur de l'élément. Sur le navigateur IE, la méthode obj.currentStyle.left est utilisée pour obtenir la valeur de l'attribut.

La troisième méthode, utilisez obj.offsetLeft pour obtenir la valeur d'attribut gauche de l'objet et utilisez obj.offsetTop pour obtenir la valeur d'attribut supérieure de l'objet .

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:php.cn
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