Stilizarea elementelor în JavaScript
Să presupunem că avem mai multe paragrafe:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Să parcurgem aceste paragrafe cu un ciclu și la sfârșitul
fiecărui paragraf să adăugăm un link, la click pe
care textul paragrafului va primi
o anumită stilizare. De exemplu, textul paragrafului
va deveni tăiat (aceasta se face cu
proprietatea CSS text-decoration).
Să discutăm două nuanțe ale acestei sarcini.
În primul rând, așa cum s-a discutat în lecțiile anterioare, nu este recomandat să schimbați stilurile paragrafului direct prin JavaScript - va fi mult mai convenabil să aplicați niște clase CSS.
În al doilea rând, la implementarea acestei sarcini vă așteaptă o oarecare surpriză. Pentru a înțelege esența acesteia, să ne uităm la codul HTML al paragrafelor după adăugarea linkurilor:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Să ne imaginăm acum că la click pe link textul paragrafului va fi tăiat. Cu toate acestea, linkul în acest caz este și el o parte a paragrafului și va fi, de asemenea, tăiat! Cel mai probabil, un astfel de efect nu este dorit de noi. Dorim ca textul să fie tăiat, dar linkul - nu.
Pentru a rezolva problema, trebuie pur și simplu să înfășurați
textul paragrafului în tag-ul span, astfel:
<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>
Este dat următorul cod HTML:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Adăugați la sfârșitul fiecărui paragraf un link, la click pe care textul paragrafului va fi tăiat (iar linkul - nu).
Modificați sarcina anterioară astfel încât după click pe link, acest link să fie șters din paragraf (iar textul paragrafului să devină tăiat).
Este dat un tabel HTML. Adăugați în acest tabel încă o coloană cu un link. La click pe acest link, rândul cu acest link ar trebui să devină cu fundal verde.
Modificați sarcina anterioară astfel încât primul click pe link să coloreze rândul în verde, iar al doilea click să anuleze această acțiune.
