Jump to content
Sign in to follow this  
Bernichou

Utilisation de getElementById

Recommended Posts

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. :(

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Bernichou

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...