Stylisation d'éléments en JavaScript
Supposons que nous ayons plusieurs paragraphes :
<p>text1</p>
<p>text2</p>
<p>text3</p>
Parcourons ces paragraphes avec une boucle et ajoutons à la fin
de chaque paragraphe un lien, en cliquant sur lequel
une certaine stylisation sera ajoutée au texte du paragraphe.
Par exemple, le texte du paragraphe deviendra barré (cela est réalisé
par la propriété CSS text-decoration).
Discutons de deux nuances d'une telle tâche.
Premièrement, comme déjà discuté dans les leçons précédentes, il ne faut pas modifier les styles des paragraphes directement via JavaScript - il sera beaucoup plus pratique d'ajouter des classes CSS.
Deuxièmement, lors de la mise en œuvre d'une telle tâche, une surprise vous attend. Pour comprendre son essence, regardons le code HTML des paragraphes après l'ajout des liens :
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Imaginons maintenant qu'en cliquant sur le lien le texte du paragraphe soit barré. Cependant, le lien dans ce cas fait également partie du paragraphe et sera également barré ! Très probablement, un tel effet n'est pas souhaité. Nous voulons que le texte soit barré, mais pas le lien.
Pour résoudre le problème, il suffit d'envelopper
le texte du paragraphe dans une balise span, comme ceci :
<p><span>text1</span><a href="">link</a></p>
<p><span>text2</span><a href="">link</a></p>
<p><span>text3</span><a href="">link</a></p>
Le code HTML suivant est donné :
<p>text1</p>
<p>text2</p>
<p>text3</p>
Ajoutez à la fin de chaque paragraphe un lien, sur lequel un clic barrera le texte du paragraphe (mais pas le lien).
Modifiez la tâche précédente pour que après avoir cliqué sur le lien, ce lien soit supprimé du paragraphe (et le texte du paragraphe devienne barré).
Un tableau HTML est donné. Ajoutez à ce tableau une colonne supplémentaire avec un lien. En cliquant sur ce lien, la ligne contenant ce lien doit devenir d'un fond vert.
Modifiez la tâche précédente pour que le premier clic sur le lien colore la ligne en vert, et le second clic annule cette action.
