Stilisering van Elemente op JavaScript
Laat ons 'n paar paragrawe hê:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Laat ons deur hierdie paragrawe met 'n lus itereer en aan die einde
van elke paragraaf 'n skakel byvoeg. Wanneer daar op die skakel gedruk word,
sal 'n sekere stilering by die paragraaf se teks gevoeg word.
Byvoorbeeld, die paragraaf se teks sal deurgetrek word (dit word gedoen deur
die CSS eienskap text-decoration).
Laat ons twee nuanses van so 'n taak bespreek.
Eerstens, soos reeds in vorige lesse bespreek, moet jy nie die paragrawe se style direk deur JavaScript verander nie - dit sal baie geriefliker wees om CSS-klasse by te voeg.
Tweedens, met die implementering van so 'n taak wag daar 'n verrassing op jou. Om die wese daarvan te verstaan, laat ons kyk na die HTML-kode van die paragrawe na die byvoeging van die skakels:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Stel jou nou voor dat, wanneer op die skakel gedruk word, die paragraaf se teks deurgetrek word. Die skakel is egter ook deel van die paragraaf en sal ook deurgetrek word! So 'n effek is waarskynlik nie wat ons nodig het nie. Ons wil hê dat die teks deurgetrek moet word, maar nie die skakel nie.
Om die probleem op te los, moet jy eenvoudig die
paragraaf se teks in 'n span-tag insluit, soos volg:
<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>
Die volgende HTML-kode word gegee:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Voeg aan die einde van elke paragraaf 'n skakel by. Wanneer daar op die skakel geklik word, moet die paragraaf se teks deurgetrek word (maar nie die skakel nie).
Wysig die vorige taak sodat, na die druk op die skakel, daardie skakel uit die paragraaf verwyder word (en die paragraaf se teks deurgetrek word).
'n Sekere HTML-tabel word gegee. Voeg nog 'n kolom met 'n skakel by hierdie tabel. Wanneer op hierdie skakel gedruk word, moet die ry met daardie skakel 'n groen agtergrond kry.
Wysig die vorige taak sodat die eerste druk op die skakel die ry in 'n groen agtergrond verf, en die tweede druk hierdie aksie kanselleer.
