JavaScript : modifier le DOM

Dans cette page, je vous montre via un thème un peu coquin mais de façon très sérieuse comment modifier le DOM d'une page via un script.

Cliquez sur le texte "déshabillez moi !"

Déshabillez moi !

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 aux éléments H2 & DIV sont en ligne (attribut style de chaque balise).
Notez l'astuce pour que le titre H2 soit centré verticalement dans la boite DIV : la valeur de la propriété "line-height" pour H2 = valeur de la propriété "height" = hauteur de la boite DIV.

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.
Pour créer un nouvel élément HTML il faut d'abord le définir : document.createElement('type balise') puis préciser ses propriétés et et contenu et enfin l'insérer dans le document à partir du noeud parent : nomParent. appendChild(nomEnfant)
Rappel de la syntaxe pour supprimer un noeud "enfant" : parent.removeChild(enfant)

Si toute cette syntaxe est nouvelle pour vous :
Pour en savoir plus sur la modificatin du DOM via JavaScript
Retour menu