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

Portekoi

Bernichou

Bernichou

Portekoi

Veuillez vous connecter pour commenter

Parcourir

Activité