La méthode getElementById

La méthode JavaScript getElementById() permet de récupérer les informations d'une balise identifiée par son id.

Syntaxe

informations à récupérer = document.getElementById("nom");
  • document représente la page HTML, plus précisément l'intérieur de la fenêtre du navigateur : la zone d'affichage sans la barre d'adresse et les boutons de navigation.
  • nom désigne la valeur de l'attribut id d'une balise unique située dans la page.

Changer les styles CSS avec getElementById().style

Une fonctionnalité extrêmement puissante du JavaScript consiste à modifier les styles CSS avec la méthode getElementById().style.

Ci-dessous un script pour changer la couleur du texte en cliquant sur des boutons grâce à la propriété CSS color :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function changeCouleur(nouvelleCouleur) {
			document.getElementById("paragraphe").style.color = nouvelleCouleur;
		}
		</script>
	</head>
	<body>
		<p id="paragraphe">Un peu de texte</p>
		<button onclick="changeCouleur('blue');">blue</button>
		<button onclick="changeCouleur('red');">red</button>
	</body>
</html>

Résultat si on appuie sur le bouton red :

javascript-couleur

L'exemple suivant permet de changer la couleur d’arrière-plan d’une balise suite à un clic sur un bouton.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function changefond() {
			document.getElementById("titre").style.backgroundColor="#FF0000"; 
		}
		</script>
	</head>
	<body>
		<h1 id="titre">La couleur de fond du titre va changer au clic sur le bouton</h1>
		<button onclick="changefond()">Change la couleur</button>
	</body>
</html>

Beaucoup de menus réalisés en JavaScript utilisent la propriété visibility pour masquer ou démasquer des balises. Cet exemple pourrait également utiliser la propriété display avec les valeurs none et block.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script> 
		// La fonction qui affiche ou masque l'élément 
		function bascule(elem) {
			// Quel est l'état actuel ?
			etat = document.getElementById(elem).style.visibility;
			if(etat == "hidden")
				document.getElementById(elem).style.visibility = "visible";
			else
				document.getElementById(elem).style.visibility = "hidden";
		}
		</script>
	</head>
	<body>
		<input type="button" onclick="bascule('boite')" value="On/Off">
		<div id="boite" style="visibility:hidden"> 
			<h1>Coucou, je suis là !</h1>
			<p>Et moi aussi !</p> 
		</div> 
	</body>
</html>

Les propriétés CSS qui suivent l'expression getElementById(elem).style s’écrivent en minuscules si la propriété est en un seul mot, et en "minusculeMajuscule" si la propriété est un mot composé. Par exemple, on écrira borderColor pour la propriété CSS border-color. On peut de cette manière modifier la plupart des propriétés CSS, ce qui laisse imaginer les immenses possibilités du JavaScript grâce aux modifications des CSS.

Toutes les propriétés CSS modifiables sur : http://www.w3schools.com/jsref/dom_obj_style.asp

La propriété innerHTML

Syntaxe

document.getElementById('exemple').innerHTML = "Code HTML à écrire";

La propriété innerHTML permet de remplacer complètement le contenu d’une balise identifiée par son attribut id. Pour faire simple, elle permet d’écrire à un endroit précis de la page, sans tout effacer contrairement à document.write.

Exemples simples

Cet exemple appelle une fonction qui effectue un calcul et inscrit le résultat dans la page :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<p id="exemple">Cliquez sur le bouton et ce texte changera.</p>
		<input type="button" value="clic" onclick="changetexte()">
		<script>
		function changetexte() {
			document.getElementById("exemple").innerHTML = "Texte changé !";
		}
		</script>
	</body>
</html>

Cet exemple appelle une fonction qui effectue un calcul puis inscrit le résultat dans une balise <p> :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<p id="exemple"></p>
		<script>
		function superFonction(a, b) {
			return a * b;
		}
		document.getElementById("exemple").innerHTML = superFonction(4, 3);
		</script>
	</body>
</html>

Effet zoom sans JQuery

Ici on peut éviter les accumulations de fenêtres pop-up en jouant avec la propriété CSS z-index. L’image agrandie est pré chargée sans être affichée grâce au display:none.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function zoom() {
			document.getElementById("agrandir").innerHTML = "<img src='grande.jpg' style='position:absolute; top:50px; left:50px; z-index:1; cursor:pointer' onclick='dezoom()' title='Fermer'>";
		}
		
		function dezoom() {
			document.getElementById("agrandir").innerHTML = "";
		}
		</script>
	</head>
	<body>
		<img src="vignette.jpg" onclick="zoom()" style="cursor:pointer">
		<p>New York Times Square New York Times Square New York Times Square New York Times Square New York Times Square New York Times Square New York </p>
		<div id="agrandir"></div>
		<img src="grande.jpg" style="display: none">
	</body>
</html>

La machine à écrire de Michel Audiard

Pour finir en beauté, voici une petite mécanique assez complexe d’insertion de texte au sein de la balise HTML <q> avec un effet d'animation similaire à une « machine à écrire ».

  • Les textes de Michel Audiard sont écrits caractère par caractère, grâce à la méthode setInterval() qui appelle la fonction machineEcrire() tous les dixièmes de seconde.
  • La méthode charAt() retourne le caractère de la phrase à l’emplacement spécifié.
  • message.length renvoie le nombre de caractères de message.
  • message.substr(0,cour) extrait un certain nombre de caractères, précisé dans la variable cour, à partir du début de la chaine message.
  • La méthode clearInterval() arrête le setInterval() quand le dernier caractère des citations est atteint.
  • La balise de citation <q> ajoute les guillemets en début et fin de phrase.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
        .ecrire {
            color:#fff;
            background-color:#000;
            padding:3px;
            font-weight:bold;
        }
        </style> 
        <script>
        function machineEcrire() { 
            document.getElementById('citation').innerHTML=message.substr(0,cour)+"<span class='ecrire'>"+message.charAt(cour)+"</span>";
            if (cour==message.length)
                clearInterval(animation);
            else
                cour++;
        }
        message = "Dans la vie, il faut être gentil avec les femmes ; même avec la sienne. Quand on mettra les cons sur orbite, t'as pas fini de tourner. Un intellectuel assis va moins loin qu'un con qui marche.";
        cour=0;
        animation=setInterval("machineEcrire()",100);
        </script>
    </head>
    <body>
        <q id="citation"></q>
    </body>
</html>

Ce code affichera progressivement ces belles citations à l'écran  :

michel-audiard

Articles connexes