Changer certaines propriétés d'une boite

Cliquez sur le texte "déshabillez moi !"

Déshabillez moi !

Le code de la page

Le code HTML & CSS

... <div style ="width : 300px ; height :450px; background-image :url(../images/burkini.jpg) ; background-size : cover ; margin:auto; "> <h2 style ="text-align : center ; height : 450px ; line-height : 450px; background : none ;">Déshabillez moi ! </h2> </div> ...

Les règles de style relatives à la boite DIV et à la balise H2 sont dans ces balises (attribut style).
Notez l'astuce pour que le titre H2 soit centré verticalement dans la boite : line-height = height.

Le script

	var boite = document.querySelector("div"); 
	var texte = document.querySelector("h2"); 
	texte.onclick =function()
	{
		boite.style.backgroundImage = "url(../images/jolie_fille.jpg)";
		texte.textContent ="je suis déshabillée !";
		var bouton =document.createElement('button');
		bouton.style.width = "200px"; 
		bouton.textContent ="Rhabillez moi SVP !"
		boite.appendChild(bouton);  // ajout d'un noeud de type button
		bouton.onclick= function()	//si clic sur ce nouveau bouton
		{
			boite.style.backgroundImage = "url(../images/burkini.jpg)";
			texte.textContent ="je suis rhabillée !";
			bouton.style.display ="none"; // le bouton disparait
		} //fin fonction 
	} // fin fonction 

Si clic sur la balise H2 contenu dans la boite DIV celle-ci change d'image de fond ; le texte de la balise H2 est modifié ; un bouton de type button est inséré sous la boite DIV.
Si alors clic sur ce bouton la boite DIV retrouve l'image de fond initiale et le texte de H2 est de nouveau modifié ; le bouton de commande est masqué.
Notez qu'une fonction anonyme appelle une autre fonction anonyme.

Pensez à écrire la propriété CSS avec la syntaxe JS. Exemple : background-image → backgroundImage dans le cadre d'un script.

J'aurais pu supprimer le bouton de commande plutôt que de le masquer.
Mais supprimer un élément en JS traditionnel est un peu compliqué ; C'est l'un des défaut du modèle DOM.
Sachez que la suppression d'un noeud est facile avec jQuery. Voir dans le même tuto les chapitres relatifs à jQuery !

Retour menu