Divs ont remplacé les tables de cadre derrière la conception de site web. Vous utilisez div pour contenir des contenus tels que textes, images et multimédia. Ces divs peuvent changer en fonction de l'interaction de l'utilisateur avec la page. Par exemple , en cliquant sur ​​un bouton peut modifier le texte dans la div ou de modifier la couleur de la div . Vous pouvez entrer du code pour créer des effets . Instructions
1

Ouvrez un document HTML existant ou en créer un nouveau dans votre éditeur de texte.
2

Insérer une div vide avec l'ID " sampleDiv " et deux boutons avec la classe de "bouton" entre les balises body et . Les boutons déclenchent les fonctions JavaScript appelé " changeText " et " changeColor " comme ci-dessous :

Photos

Ajouter texte < /button> Photos

< type de bouton = "bouton" class = "button" onclick = " changeColor ( )"> Changer de couleur < /button>
3

Insérer le style suivant pour la div et les boutons entre les balises et dans le document HTML . Faire la DIV 200 pixels de large par 50 pixels de profondeur avec une bordure noire . Ajoutez un peu de rembourrage pour les boutons. Créer un style pour une classe appelée " redColor " qui modifie la couleur de fond d'un élément à Bordeaux rouge

4

Insérer les fonctions JavaScript suivantes ci-dessous les styles :

< script type = " text /javascript" > Photos

fonction changeText () {

document.getElementById (" sampleDiv " ) firstChild.nodeValue = "Vous avez ajouté du texte avec succès." ; .

} < br > fonction

changeColor () première fonction ajoute du texte à la div . La seconde change de couleur en ajoutant la classe des " redColor », qui applique le style " redColor " .
5

enregistrez votre document HTML et l'ouvrir dans votre navigateur. Cliquez sur chaque bouton pour observer l'effet escompté . Le code complet apparaîtra comme suit :

Photos