Stilizarea elementelor în JavaScript

Să presupunem că avem mai multe paragrafe:

html<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:

html<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:

html<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>

html<p>text1</p>
<p>text2</p>
<p>text3</p>