Stilizzazione di elementi in JavaScript
Supponiamo di avere diversi paragrafi:
<p>testo1</p>
<p>testo2</p>
<p>testo3</p>
Iteriamo su questi paragrafi con un ciclo e alla fine
di ogni paragrafo aggiungiamo un link, al click
del quale al testo del paragrafo verrà applicata
una certa stilizzazione. Ad esempio, il testo del paragrafo
diventerà barrato (questo lo fa
la proprietà CSS text-decoration).
Discutiamo due sfumature di questo compito.
In primo luogo, come già discusso nelle lezioni precedenti, non è consigliabile modificare direttamente gli stili del paragrafo tramite JavaScript - sarebbe molto più conveniente applicare delle classi CSS.
In secondo luogo, durante l'implementazione di questo compito ti aspetta una certa sorpresa. Per capirne l'essenza, diamo un'occhiata al codice HTML dei paragrafi dopo l'aggiunta dei link:
<p>testo1<a href="">link</a></p>
<p>testo2<a href="">link</a></p>
<p>testo3<a href="">link</a></p>
Immaginiamo ora che, al click sul link, il testo del paragrafo venga barrato. Tuttavia, il link in questo caso è anch'esso parte del paragrafo e verrebbe barrato anche lui! Probabilmente questo effetto non è quello che desideriamo. Vogliamo che il testo sia barrato, ma non il link.
Per risolvere il problema basta semplicemente avvolgere
il testo del paragrafo in un tag span, in questo modo:
<p><span>testo1</span><a href="">link</a></p>
<p><span>testo2</span><a href="">link</a></p>
<p><span>testo3</span><a href="">link</a></p>
È dato il seguente codice HTML:
<p>testo1</p>
<p>testo2</p>
<p>testo3</p>
Aggiungi alla fine di ogni paragrafo un link, al click del quale il testo del paragrafo verrà barrato (ma il link no).
Modifica il compito precedente in modo che dopo il click sul link, questo link venga rimosso dal paragrafo (e il testo del paragrafo diventi barrato).
È data una tabella HTML. Aggiungi a questa tabella un'altra colonna con un link. Al click su questo link, la riga contenente il link dovrebbe diventare con sfondo verde.
Modifica il compito precedente in modo che il primo click sul link colori la riga con sfondo verde, e il secondo click annulli questa azione.
