Stilizimi i Elementeve në JavaScript

Le të themi se kemi disa paragrafë:

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

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

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

Jepet kodi HTML në vijim:

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

Shtoni në fund të çdo paragrafi një lidhje, duke klikuar në të cilën teksti i paragrafit do të kryqëzohet (por lidhja - jo).

Modifikoni detyrën e mëparshme në mënyrë që pas klikimit në lidhje kjo lidhje të fshihet nga paragrafi (dhe teksti i paragrafit të bëhet i kryqëzuar).

Jepet një tabelë HTML. Shtoni në këtë tabelë një kolonë tjetër me një lidhje. Duke klikuar në këtë lidhje rreshti me këtë lidhje duhet të marrë një background të gjelbër.

Modifikoni detyrën e mëparshme në mënyrë që klikimi i parë në lidhje të ngjyrosë rreshtin në të gjelbër, ndërsa klikimi i dytë të anulojë këtë veprim.