[javascript] connaitre la position d'un objet
Fermé
blbg
Messages postés
302
Date d'inscription
mercredi 9 avril 2003
Statut
Membre
Dernière intervention
22 novembre 2007
-
5 oct. 2003 à 20:40
juanou - 15 juil. 2010 à 11:19
juanou - 15 juil. 2010 à 11:19
A voir également:
- [javascript] connaitre la position d'un objet
- Vente objet occasion entre particulier - Guide
- Ma position - Guide
- Connaitre sa position google - Guide
- Telecharger javascript - Télécharger - Langages
- Suivi position google - Guide
2 réponses
Salut,
tu peux trouver la position avec les méthodes offsetTop et offsetLeft d'un objet HTML (sur firefox). cela te donne le coin en haut à gauche de l'objet.
Pour la taille :
var divHeight;
var obj = document.getElementById('id_element');
if(obj.offsetHeight) {divHeight=obj.offsetHeight;}
else if(obj.style.pixelHeight){divHeight=obj.style.pixelHeight;}
alors je n'ai pas testé mais j'imagine que pour la position :
var divTop;
var obj = document.getElementById('id_element');
if(obj.offsetTop) {divTopt=obj.offsetTop;}
else if(obj.style.pixelTop){divTop=obj.style.pixelTop;}
et pareil pour Left...
tu peux trouver la position avec les méthodes offsetTop et offsetLeft d'un objet HTML (sur firefox). cela te donne le coin en haut à gauche de l'objet.
Pour la taille :
var divHeight;
var obj = document.getElementById('id_element');
if(obj.offsetHeight) {divHeight=obj.offsetHeight;}
else if(obj.style.pixelHeight){divHeight=obj.style.pixelHeight;}
alors je n'ai pas testé mais j'imagine que pour la position :
var divTop;
var obj = document.getElementById('id_element');
if(obj.offsetTop) {divTopt=obj.offsetTop;}
else if(obj.style.pixelTop){divTop=obj.style.pixelTop;}
et pareil pour Left...
Salut !
Personnellement, j'ai une solution de secours.
Les types de mesure diffère entre naviguateurs (et si l'on tient compte aussi des différentes tailles d'écran ...), comment faire alors pour avoir une solution parfaite ?
Voici les fonctions qui te permettent de récupérer les dimensions de ton objet :
document.getElementById("ton_objet").clientWidth
document.getElementById("ton_objet").clientHeight
auquel tu ajoute ces fontions qui te retourne les dimensions de la page utilisé :
document.body.clientWidth
document.body.clientHeight
Et avec ça j'arrive toujours à retrouver la dimension voulu avec un petit calcul.
Savoir ce que ça retourne ? Pour moi ce sont des réels, mais je ne vois pas vraiment de typage en JS ^^
Comment ça fonctionne ? Ben tu le met dans ton code et ça roule. Je peux pas t'expliquer grand chose de plus.
document.getElementById("ton_objet") te donne ton élément, et clientWidth seulement la largeur de l'élément.
Si ça peut t'aider, voila tout ;)
Personnellement, j'ai une solution de secours.
Les types de mesure diffère entre naviguateurs (et si l'on tient compte aussi des différentes tailles d'écran ...), comment faire alors pour avoir une solution parfaite ?
Voici les fonctions qui te permettent de récupérer les dimensions de ton objet :
document.getElementById("ton_objet").clientWidth
document.getElementById("ton_objet").clientHeight
auquel tu ajoute ces fontions qui te retourne les dimensions de la page utilisé :
document.body.clientWidth
document.body.clientHeight
Et avec ça j'arrive toujours à retrouver la dimension voulu avec un petit calcul.
Savoir ce que ça retourne ? Pour moi ce sont des réels, mais je ne vois pas vraiment de typage en JS ^^
Comment ça fonctionne ? Ben tu le met dans ton code et ça roule. Je peux pas t'expliquer grand chose de plus.
document.getElementById("ton_objet") te donne ton élément, et clientWidth seulement la largeur de l'élément.
Si ça peut t'aider, voila tout ;)
15 juil. 2010 à 11:19
Tous les navigateurs ne donnent pas la même chose pour offsetTop : certain donnent la position par rapport au document, et d'autres par rapport à l'objet parent.
Il faut ruser plus que ça pour avoir une solution réellement compatible.
Vois donc avec ce script, qui marche normalement sur tout navigateur :
https://reactdom.com/restful-api/