Modifier le DOM - exemple coquin

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 de H2 = height de DIV

Attention ça marche si le texte dans H2 est monoligne ...

Le script

	var boite = document.querySelector("div"); // boite désigne la boite DIV avec image de fond
	var texte = document.querySelector("h2"); // texte désigne la balise H2
	texte.onclick =function()
	{
		boite.style.backgroundImage = "url(../images/jolie_fille.jpg)";
		var bouton =document.createElement('button');
		bouton.style.width = "200px"; 
		bouton.textContent ="Rhabillez moi SVP !"
		boite.appendChild(bouton); 
		texte.style.display ="none"; // texte masqué
		bouton.onclick= function()
		{
			boite.style.backgroundImage = "url(../images/burkini.jpg)";
			boite.removeChild(bouton); //suppression physique du bouton
			texte.style.display ="block"; //texte démasqué
		} 
	}

Notez qu'une fonction anonyme appelle une autre fonction anonyme.

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

Dès qu'on a cliqué sur le bouton de commande celui-ci est supprimé.
Rappel de la syntaxe pour supprimer un noeud "enfant" : parent.removeChild(enfant)
Retour menu