Stilizimi i Elementeve në JavaScript

Le të themi se kemi disa paragrafë:

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

Le t'i përsërisim këta paragrafë me një cikël dhe në fund çdo paragrafi të shtojmë një lidhje, duke klikuar të cilën teksti i paragrafit do të marrë disa stilizime. Për shembull, teksti i paragrafit do të bëhet i kryqëzuar (kjo bëhet nga vetia CSS text-decoration).

Le të diskutojmë dy nuanca të kësaj detyre.

Së pari, siç është diskutuar tashmë në mësimet e mëparshme, nuk duhet të ndryshohen stilet e paragrafëve direkt përmes JavaScript - do të ishte shumë më e përshtatshme të vendosni disa klasa CSS.

Së dyti, kur implementoni një detyrë të tillë, ju pret një surprizë. Për të kuptuar thelbin e saj, le të shohim kodin HTML të paragrafëve pas shtimit të lidhjeve:

html<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>

Le të imagjinojmë tani se duke klikuar në lidhjen teksti i paragrafit do të kryqëzohet. Megjithatë, lidhja në këtë rast është gjithashtu pjesë e paragrafit dhe gjithashtu do të kryqëzohet! Me shumë gjasa një efekt i tillë nuk është ai që duam. Ne duam që teksti të kryqëzohet, por lidhja - jo.

Për të zgjidhur problemin thjesht duhet të mbështjellim tekstin e paragrafit në tagun span, si kështu:

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>