Coordonnées d'écran d'un élément, via Javascript
Je vais essayer d'obtenir les coordonnées de l'écran (qui est, par rapport au coin supérieur gauche de l'écran) d'un élément dans une fenêtre de navigateur. Il est facile d'obtenir la taille et la position de la fenêtre (screenX, screenY) et il est facile (avec jQuery) pour obtenir le décalage de l'élément ($('element').offset().gauche).
Cependant, j'ai besoin de savoir combien de pixels il s'agit de l'élément jusqu'au coin de l'écran. J'ai trouvé des choses qui semblent être spécifiques à IE, mais j'aimerais que cela travailler dans autant de navigateurs que possible.
Édité pour ajouter une image: texte alt http://img72.imageshack.us/img72/7938/offsetugh.jpg
3 réponses
window.screenX/Y ne sont pas pris en charge sur IE. Mais pour les autres navigateurs, une approximation proche de la position est:
var top = $("#myelement").offset().top + window.screenY;
var left = $("#myelement").offset().left + window.screenX;
La position exacte dépend des barres d'outils visibles. Vous pouvez utiliser les propriétés outer/innerWidth et outer/innerHeight de l'objet window pour vous rapprocher un peu plus.
IE ne fournit pas beaucoup de propriétés de fenêtre, mais curieusement, un objet click event vous fournira l'emplacement de l'écran du clic. Donc je suppose que vous pourriez avoir une page d'étalonnage qui demande à l'utilisateur de "cliquez sur le point rouge" et gérez l'événement avec
function calibrate(event){
var top = event.screenY;
var left = event.screenX;
}
Ou peut-être utiliser les événements mouseenter/leave en utilisant les coordonnées de cet événement pour calibrer. Bien que vous ayez du mal à déterminer si la souris est entrée par la gauche, la droite, le haut ou le bas.
Bien sûr, dès qu'ils déplacent l'écran, vous devrez recalibrer.
Pour en savoir plus sur les compatibilités des propriétés du navigateur, consultez les tables de Modèles D'objets PPK.
Je ne pense pas que ce soit possible.
Les coordonnées de l'élément sont relatives au coin supérieur gauche de la page rendue.
Les coordonnées de la fenêtre sont relatives à l'écran.
Il n'y a, à ma connaissance, rien qui relie le coin supérieur gauche de la page rendue au coin supérieur gauche de la fenêtre . Il n'y a donc aucun moyen de tenir compte des bordures, des barres de défilement, du chrome, etc. Donc, je pense que vous êtes coulé sur celui-ci.
Je ne suis pas d'accord avec la réponse de jvenema.
J'ai trouvé une solution qui fonctionne pour moi sur google chrome de toute façon, mais j'espère que cela se travaille sur de nombreux autres navigateurs trop (peut-être pas sur certains anciens explorateurs internet).
À l'intérieur des balises <script>, déclarez deux nouvelles variables globales appelées: pageX et pageY avec le mot-clé var.
Ces variables globales doivent toujours stocker les coordonnées du coin supérieur gauche de la page rendue par rapport à le coin supérieur gauche du moniteur d'écran, mais pour atteindre cet objectif, le {[3] } devrait se réfère à une fonction qui définit le pageX à la différence d'événement.screenX et événement.clientX, et le pageY à la différence de l'événement.screenY et événement.clientY.
, Puis tout ce que vous devez faire est d'obtenir les coordonnées d'un élément (par rapport au coin supérieur gauche de la page) et ajouter pageX et pageY. Les résultats de ces expressions seront les coordonnées de cet élément par rapport au coin supérieur gauche de l'écran !
Exemple de Code (uniquement javascript):
<script>
var pageX;
var pageY;
window.onmousemove = function (e) {
pageX = e.screenX - e.clientX;
pageY = e.screenY - e.clientY;
}
function getScreenCoordinatesOf(obj) {
var p = {};
p.x = pageX + obj.clientLeft;
p.y = pageY + obj.clientTop;
return p;
}
</script>
Espérons que cela aide!