11566 sujets

JavaScript, DOM et API Web HTML5

[Résolu] GetElementById ne lit pas mes DIV

Bonjour,

Je fais mes premiers pas en Javascript et j'essaie de faire fonctionner "getElementById".
J'ai donc fait un petit programme avec une Div et une image :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:75px;
	top:21px;
	width:412px;
	height:142px;
	z-index:1;
	border: medium solid #0033FF;
}
#Image {
	width:791px;
	height:400px;
	}
	</style>
</head>

<body>
<div id="apDiv1"></div>
<img src="crustaces.jpg" id="Image" />

</div>
<script type="text/javascript">
var obj1=document.getElementById("apDiv1").height;
	alert("heightapDiv1= "+obj1);

	var obj2=document.getElementById("Image").height;
	alert("heightImage= "+obj2);
    </script>
</body>
</html>


Pour la Div, "getElementById" me répond "undefined"
et pour l'image, j'ai la bonne réponse, ici 400

J'ai beau essayer de déplacer le code de toutes les façons possibles, je n'arrive pas à obtenir de valeur avec une Div !

Quelqu'un voit-il où est mon erreur ? Smiley fache

D'avance merci
Modifié par Berni (22 Jun 2011 - 15:41)
"Pour la Div, "getElementById" me répond "undefined""

Non tu te trompe, getElementById te retourne bien ta div et non "undefined". C'est la propriété "height" qui te retourne undefined, car ta div n'a pas de propriété height.

getElementById('AppDiv1') ----> retourne bien ta div
AppDiv1.height ----> undefined

Si getElementById ne marchais pas tu aurais un tout autre résultat, une "ReferenceError" qui bloquerait l'execution de tout ton javascript : tu ne verrais même pas tes alerts !!

getElementById('AppDiv1657897') ----> undefined
undefined.height ----> throws new ReferenceError()
Modifié par Ywg (21 Jun 2011 - 10:30)
PS : et pour le pourquoi du comment l'un marche et l'autre non, c'est simple :

Ta div te retourne un objet qui hérite des interfaces suivantes :

HTMLDivElement -> HTMLElement -> Element -> Node -> [Host]Object

Et ton image de :

HTMLImageElement -> HTMLElement -> Element -> Node -> [Host]Object

Qui ont respectivement les propriétées (non-exhaustif) suivantes :

HTMLDivElement : align Smiley deprecated
HTMLImageElement : align Smiley deprecated , alt, border Smiley deprecated , height, hspace Smiley deprecated , isMap, longDesc, name, src, useMap, vspace Smiley deprecated , width
HTMLElement : style[via l'interface ElementCSSInlineStyle], className, dir, id, lang, title
Element : tagName + une tripotée de méthodes
Node : attributes, childNodes, firstChild, lastChild, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, previousSibling + une tripotée de méthodes

Pour obtenir la hauteur de ta div tu dois en fait lire les styles CSS de ta div, et non chercher une propriété de l'element DOM.

PPS : remercie le rhino pour cette réponse
Bonjour,

Si tu souhaites connaître la hauteur (height) d'un bloc HTML en javascript, il existe deux façons selon les navigateurs :

element.offsetHeight
element.style.pixelHeight

Ainsi, le code suivant permet d'obtenir la hauteur d'un bloc HTML quel que soit le navigateur :

<script type="text/javascript">
<!--
var divHeight;
var obj = document.getElementById('id_element');

if(obj.offsetHeight)          {divHeight=obj.offsetHeight;}
else if(obj.style.pixelHeight){divHeight=obj.style.pixelHeight;}
//-->
</script>

Cordialement
Bonsoir,
merci lddsoft et Ywg pour toutes ces informations. J'ai essayé offsetHeight et effectivement, ça marche Smiley biggrin ... bien que le nombre de pixels ne soit pas exactement le même que celui que j'ai donné (336 pour 330px 148 pour 142px Smiley ohwell )
Par contre, Ywg, je ne comprends pas quand tu dis :
a écrit :
ta div n'a pas de propriété height

Que ce soit la DIv ou l'image, je leur ai donné une propriété Height en style CSS.
getElementById(DIv).height donne undefined,
getElementById(Image).height donne un nombre Smiley decu
Peut-être pouvez-vous m'expliquer Smiley confused

Cordialement
La subtilité réside dans le fait que tu as donné une hauteur en css.

Ton image à un attribut height dans sa représentation DOM (l'objet HTMLImageElement) donc cela marche.

Mais ta div n'a pas d'attribut height dans sa représentation DOM (l'objet HTMLDivElement).

Hors lorsque tu fais un getElementById c'est l'objet DOM que tu obtient.
Il faut faire abstraction de ce que tu vois à l'écran : ta div à certes une hauteur, mais cet attribut n'est pas forcément stoqué dans l'élement lui même.

Pour te donner un exemple (ridicule) mais tangible, imagine un sapin.
Un sapin n'est pas lumineux, même un sapin de noël avec ses guirlandes. Ce sont en fait les guirlandes qui "décorent" le sapin qui le sont !

Retranscrit en code cela donnerait :
alert(sapin.luminosite); //undefined
alert(sapin.guirlande.luminosite); // 42


Il faut faire la différence entre ta div (élement abstrait) et les CSS qui le décorent.
Une image à intrinsèquement une hauteur, mais pas une div.
Bonjour,
Berni a écrit :
J'ai essayé offsetHeight et effectivement, ça marche ... bien que le nombre de pixels ne soit pas exactement le même que celui que j'ai donné (336 pour 330px 148 pour 142px)

La différence du nombre de pixels est certainement dûe à l'épaisseur donnée à la bordure. Dans ton code, elle est fixée à "medium" et doit représenter 3px par bordure pour chaque côté Smiley cligne .
Bonjour à tous,

J'ai vérifié ce que tu m'as dit Iddsoft. la différence de pixels est en effet due à l'épaisseur de la bordure.

Je suis tout nouveau sur ce forum et vous avez répondu en 3 posts à des questions que je me posais depuis plusieurs semaines et pour lesquelles je ne trouvais aucune réponse satisfaisante sur d'autres forums. Merci pour votre gentillesse et votre efficacité Smiley biggrin .
je vais continuer mes tâtonnements et je reviendrai vous demander votre aide lorsque j'aurai d'autres problèmes (ce qui risque d'arriver assez vite Smiley confused )

Ps:
Où doit-on cliquer pour marquer le post comme "résolu" ?
Bonne continuation, alors! Smiley smile

Berni a écrit :
Où doit-on cliquer pour marquer le post comme "résolu" ?


Il suffit d'éditer ton premier message et de commencer le titre par [Résolu] ! Smiley cligne
Sujet clos
Aller à