Utilisation de getElementById

Bernichou · 3 Juin 2011

Bonjour,

Je débute en Javascript et je voulais pratiquer la méthode « getElementById » pour voir si jobtenais un résultat.

Jai donc fait un programme élémentaire avec une Div.

<!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>
<link href="PourDivAccueil.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="div2"></div>
<script language="javascript" type="text/javascript">
var obj=document.getElementById("div2");
alert("obj= "+obj);
hauteur=obj.style.height;
alert("hauteur= "+hauteur); 
</script>
</body>
</html>

Je lui ai donné des propriétés dans un fichier externe « PourDivAccueil.css »

@charset "utf-8";
#div2 {
	background-color: #FF9900;
	top: 10px;
	left: 10px;
	right: 10px;
	height: 300px;
	border: thin solid #3363Fd;
}

et jai tenté de me les faire restituer avec getElementById .

Au mieux, jobtiens les alertes suivantes :

------ obj=[object HTMLDivElement]

-------hauteur=

Jai essayé en interne avec

<body>
<div id="div2" style="left:50; border:solid; right:50; height:300; top: 10px;"></div>

Puis avec

<style type="text/css">
<!--
#div2 {
	background-color: #FF9900;
	top: 10px;
	left: 10px;
	right: 10px;
	height: 300px;
	border: thin solid #3363Fd;
}
!-->
</style>

</head>

Je nobtiens alors que les alertes suivantes :

------obj=[object HTMLDivElement] et

------hauteur undefined

Jaimerais donc savoir ce que je fais comme erreur pour pouvoir avancer !

Davance merci.

**Portekoi** · 3 Juin 2011

Bonjour,

Modifie ceci :

var obj=document.getElementById("div2");

En cela :

var obj=document.getElementById("div2").innerHTML;

En respectant bien les majuscules.

Par contre pour le height, il doit être mit dans la balise et non en CSS. A vérifier.

Portekoi

Bernichou · 3 Juin 2011

Bonsoir Portekoi,

Merci d'avoir pris la peine de me répondre. Par contre, après avoir effectué la transformation que tu m'as indiquée, je n'obtiens aucune modification :wacko:

Il doit pourtant bien y avoir une solution ; getElementById semble être une méthode très utilisée .

Une autre solution ?

Bernichou

Bernichou · 5 Juin 2011

Personne n'a d'autre explication à me proposer :whistling:

Je fais appel aux familiers de Javascript pour me sortir de cette impasse :wacko:

Bernichou

**Portekoi** · 5 Juin 2011

Ce code fonctionne :


<!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>
<link href="PourDivAccueil.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="div2" style="height: 350px">klklk</div>
<script language="javascript" type="text/javascript">
var obj=document.getElementById("div2");
alert("obj = " + obj.innerHTML);
var hauteur = obj.style.height;
alert("hauteur= "+hauteur); 
</script>
</body>
</html>

Connexion

Utilisation de getElementById

Sujets conseillés

Bernichou

Lien vers le commentaire

Partager sur d’autres sites

Portekoi

Lien vers le commentaire

Partager sur d’autres sites

Bernichou

Lien vers le commentaire

Partager sur d’autres sites

Bernichou

Lien vers le commentaire

Partager sur d’autres sites

Portekoi

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité