11548 sujets

JavaScript, DOM et API Web HTML5

Calculer la position d'un élément en javascript.

Bonjour à tous. Smiley smile

Je commence à réaliser de petits scripts sympa avec javascript et ajax et un problème me revient régulièrement ... et il semblerait que je ne sois pas le seul, au vu de mes recherches. Cependant, certains sites donnent une solution, d'autres en donnent ... d'autres, bref, c'est le seul véritable problème que je rencontre : il s'agit du calcul de la position d'un élément en javascript. Il semblerait que les navigateurs n'utilisent pas les même propriétés javascript ...

Ainsi, pour "width" et "height", on m'a dit qu'il existait uniquement deux solutions et qu'il fallait faire ainsi :


	if(document.body.clientWidth) {

		var body_width = document.getElementById(element).clientWidth;

		var body_height = document.getElementById(element).clientHeight;


	}

	else if(window.innerWidth) {

		var body_width = document.getElementById(element).innerWidth;

		var body_height = document.getElementById(element).innertHeight;




	}


Et ça fonctionne ... enfin je pense, je n'ai que Firefox et Internet Explorer, mais à priori ce sont les deux seules possibilités. En revanche, pour le calcul de "Top" et de "Left", j'entends des sons de cloches différents ... certains fonctionnent, d'autres non ; mais impossible de dire si il s'agit du code en lui même ou simplement d'un problème de comptabilité de navigateur. On m'a parlé de "document.getElementById(element).Xoffset" et de "document.getElementById(element).offsetTop" par exemple pour la recherche "top", de "document.getElementById(element).offsetLeft" pour "left" ... donc pour "left" il n'existe qu'une seule possibilité ?

Bref, si quelqu'un pourrait récapituler, ce serait réellement utile à pas qu'à moi je pense.
Merci d'avance,
Gaylord.P. Smiley smile Smiley confused
Modifié par Gaylord.P (04 Dec 2008 - 13:25)
Bonjour,

Il me semble qu'il y a un souci dans le code que tu as mis pour width et height :

document.getElementById(element).clientWidth;

va effectivement renvoyer la largeur de l'élément sans compter les bordures et l'éventuelle barre de défilement mais en incluant les marges internes.

par contre
document.getElementById(element).innerWidth;

innerWidth n'est pas une propriété d'un DOM Element et devrait renvoyer une erreur. innerWidth est une propriété de l'objet window et renvoie la largeur de la fenêtre du navigateur.

si tu utilises :
document.getElementById(element).offsetWidth

qui est valable pour tous les navigateurs, tu vas récupérer la largeur de l'élément en incluant les bordures.

Tu trouveras toutes ces précisions et d'autres encore à la page W3C DOM Compatibility sur quirksmode


Concernant la position d'un élément, offsetLeft et offsetTop renvoient les positions d'un élément relatif à son offsetParent. Il faut donc savoir comment est déterminé l'offsetParent d'un élément par le navigateur : en fait pour un élément DOM, le navigateur va parcourir les ancêtres de cet élément jusqu'à qu'il tombe sur :
- l'élément <body>
- un élément qui a une position autre que "static"
- un élément <table>, <th> ou <td>, seulement si l'élément dont tu cherches la position a position:static.
(cf lien précédent)

Par exemple, imagine que tu as un <p> positionné à 10px,10px du coin haut gauche d'un <div> lui même positionné à 200px,100px du body.
Si ton <div> est en position:static, offsetLeft et offsetTop du <p> seront 210 et 110
Si ton <div> est en position:relative, offsetLeft et offsetTop du <p> seront 10 et 10

Dans certains cas, il peut être utile de récupérer la position "réelle" dans la fenêtre, pour cela j'utilise cette fonction tiré de quirksmode qui parcoure l'arbre des offsetParent et ajoute les offsetTop et offsetLeft de chacun.


        function getPositionLeft (obj) {
		var curleft = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft;
			while (obj = obj.offsetParent) {curleft += obj.offsetLeft;}
		}
		return curleft;
	}

	function getPositionTop (obj) {
		var curtop = 0;
		if (obj.offsetParent) {
			curtop = obj.offsetTop;
			while (obj = obj.offsetParent) {curtop += obj.offsetTop;}
		}
		return curtop;
	}


J'espère que cela répond à ta question

dunjl
Sujet clos
Aller à