JavaScript-de elementleriň stilizasiýasy
Bizde birnäçe abzas bolsun:
<p>tekst1</p>
<p>tekst2</p>
<p>tekst3</p>
Geliň bu abzaslary aýlaw bilen gezip, her abzasyň
ahyryna bir çykgyt goşalyň, basylanda
abzasyň tekstine käbir stilizasiýa goşuljak.
Mysal üçin, abzasyň tekstiniň üstünden çyzyk
çekiler (muny CSS aýratynlygy text-decoration amala aşyrýar).
Geliň şeýle meseläniň iki nyuansyny çözeliň.
Birinjiden, öňki sapaklarda çözüşi ýaly, abzalaryň stillerini gönüden-göni JavaScript arkaly üýtgetmek gerek däl - CSS klaslaryny ýüklemek has amaty bolar.
Ikinjiden, şeýle meseläni amala aşyrylanda sizi bir süpriz garaşýar. Onuň manyny düşünmek üçin, geliň çykgytlar goşulandan soň abzaslaryň HTML koduna göz aýlalyň:
<p>tekst1<a href="">çykgyt</a></p>
<p>tekst2<a href="">çykgyt</a></p>
<p>tekst3<a href="">çykgyt</a></p>
Indi göz öňüne getirýäris, çykgydy basanyňyzda abzasyň tekstiniň üstünden çyzyk çekiler. Emma, çykgyt bu ýagdaýda hem abzasyň bir bölegi we onuň üstünden hem çyzyk çekiler! Büýkhtihimal, şeýle effekt bize gerek däl. Biz tekst üstünden çyzyk çekilmegini isleýäris, ýöne çykgyt - ýok.
Meseläni çözmek üçin diňe tekst
abzasy span tegine öwürmeli, şeýle:
<p><span>tekst1</span><a href="">çykgyt</a></p>
<p><span>tekst2</span><a href="">çykgyt</a></p>
<p><span>tekst3</span><a href="">çykgyt</a></p>
Aşakdaky HTML kody berlen:
<p>tekst1</p>
<p>tekst2</p>
<p>tekst3</p>
Her abzasyň ahyryna bir çykgyt goşuň, basylanda abzasyň tekstiniň üstünden çyzyk çekiler (ýöne çykgyt - ýok).
Öňki meseläni üýtgediň, şeýle çykgydy basanyňyzdan soň bu çykgyt abzasyndan aýrylsyn (we abzasyň tekstiniň üstünden çyzyk çekiler).
Bir HTML tablisasy berlen. Bu tablisasa çykgytly ýene bir sütün goşuň. Şu çykgydy basanda bu çykgytly hatar ýaşyl fon bolmaly.
Öňki meseläni üýtgediň, şeýle birinci gezek çykgydy basanda hatary ýaşyl fon bilen boýasyn, ikinji basyş bolsa bu hereketi ýatyrsyn.
