GetElementById : utiliser la méthode document.getElementById - Blog de l'agence web STUDIO VITAMINE
Agence creation de site internet
agence web la rochelle

getElementById : utiliser la méthode document.getElementById

GETELEMENTBYID : UTILISER LA METHODE DOCUMENT.GETELEMENTBYID

14/02/2009 à 16h34
Fabien BRANCHUT
Développement web
agence creation site internet
Votre site Internet en AJAX et JavaScript...
En javascript, savoir utiliser la méthode getElementById() de l'objet document est très pratique car elle vous permet d'accéder à un élément unique de votre page web facilement pour, par exemple, modifier le style CSS de l'élément, récupérer des informations sur l'élément, etc.
 
Pour ce billet, je vais utiliser la méthode document.getElementById() pour :
 
 
 
 
  • modifier le style CSS d'un div (ex : la couleur d'arrière plan)
  • modifier la valeur d'un champ texte
  • récupérer le contenu d'un div
  • ajouter le focus sur un champ texte
 
Pour utiliser getElementById, il faut d'abord attribuer un identifiant à un élément de la page HTML via l'attribut id.
 
Par exemple :
 
<div id="div1"></div>
 
Ici, je viens d'identifier de manière unique la balise <div> grâce à la valeur "div1" de l'attribut id. ATTENTION ! Aucun autre élément de la page ne doit avoir le même attribut id avec la même valeur, sous peine de faire buguer javascript.
 
Ensuite, pour appeler ce div via javascript, voici la commande :
 
document.getElementById("div1");
 

EXEMPLE 1 : getElementById.style (modifier la couleur de fond d'un div)

<html>
<head>
<style>
#div1{
background-color:#ff0000;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="div1"></div>
<input type="button" value="Vert" onclick="javascript:document.getElementById('div1').style.backgroundColor='#00ff00';" />
<input type="button" value="Rouge" onclick="javascript:document.getElementById('div1').style.backgroundColor='#ff0000';" />
</body>
</html>
 
 Exemple en action :
 
 
 

EXEMPLE 2 : getElementById.value (modifier la valeur d'un champ texte)

<html>
<head>
</head>
<body>
<input type="text" id="input1" value="2" readonly="readonly" />
<input type="button" value="Multiplier par 2" onclick="javascript:document.getElementById('input1').value=document.getElementById('input1').value*2;" />
</body>
</html>
 
Exemple en action :
 
 

EXEMPLE 3 : getElementById.innerHTML (recuperer le contenu d'un div)

 <html>
<head>
</head>
<body>
<div id="div2">Voici le contenu de mon div !!!</div>
<input type="button" value="Récuperer le contenu" onclick="javascript:alert(document.getElementById('div2').innerHTML);" />
</body>
</html>
 
Exemple en action :
 
Voici le contenu de mon div !!!
 

EXEMPLE 4 : getElementById.focus (ajouter le focus dans un champ texte)

<html>
<head>
</head>
<body>
<input type="text" id="input2" />
<input type="button" value="Ajouter le focus" onclick="javascript:document.getElementById('input2').focus();" />
</body>
</html>
 
Exemple en action :
 
 
 
 
 
 
flux RSS info web
Bookmark and Share

Liste des commentaires

2 commentaires

Changer l'image background

J'aurai besoin de pouvoir changer l'image background d'un div en fonction de la position dans map avec la méthode GetElementById. comme dans votre premier exemple.

merci

smartLED
smartLED
Il y a 1 an et 2 mois
Jeudi 16 juillet 2009 à 19h14

Re : Changer l'image background

Pourriez-vous me préciser ce qu'est la "position dans map" ? N'hésitez-pas à ajouter du code HTML.
Fabien BRANCHUT (Masculin, 36 ans, France)
Il y a 1 an et 2 mois
Vendredi 17 juillet 2009 à 09h00
Page web : cv developpeur web sur le site www.le-developpeur-web.com

Ajoutez votre commentaire

Commentaire
Ces billets parlent aussi de "getelementbyid"
27/03/2009 JAVASCRIPT CSS : MODIFIER UN STYLE CSS OU UNE CLASSE CSS AVEC JAVASCRIPT

Il est souvent bien pratique de modifier les styles CSS directement avec JavaScript ou alors changer la classe CSS d'un élément HTML avec Javascript. Je vous (...)

Voir tous les billets qui parlent de « getelementbyid ».
Ces billets parlent aussi de "javascript"
01/04/2010 INFOS FORMATIONS WEB

Infos formations web ll reste de la place pour deux formations : • Initiation au référencement naturel le 3 et 4 Mai 2010 dans nos locaux, (...)

04/12/2009 STUDIO VITAMINE LANCE DES FORMATIONS WEB !

STUDIO VITAMINE, lance quatre formations web. Nos formations se démarquent par un nombre important de travaux pratiques, une mise à disposition d'un ordinateur par personne, (...)

06/03/2009 CREER UN ROLLOVER SUR UNE IMAGE (AVEC CSS OU JAVASCRIPT)

Un rollover sur une image est un comportement permettant de changer d'image lorsque le pointeur de la souris passe dessus, puis l'image revient dans son (...)

Voir tous les billets qui parlent de « javascript ».
Ces billets parlent aussi de "dhtml"
Voir tous les billets qui parlent de « dhtml ».
• Votre pub sur ce blog
• Catégories
• Derniers billets
• Derniers commentaires
• Partenaires qualité
• Suivre le blog