JavaScript-ով էլեմենտների ստիլավորում
Ենթադրենք ունենք մի քանի պարբերություններ.
html<p>text1</p>
<p>text2</p>
<p>text3</p>
Եկեք ցիկլով անցնենք այս պարբերությունների վրայով և յուրաքանչյուր պարբերության վերջում
ավելացնենք հղում, որի սեղմումով
պարբերության տեքստը կստանա
որոշակի ստիլավորում։ Օրինակ, պարբերության տեքստը
կդառնա խաչված (դա ապահովում է
CSS-ի text-decoration հատկությունը)։
Եկեք քննարկենք նման խնդրի երկու նրբություն։
Նախ, ինչպես արդեն քննարկվել է նախորդ դասերում, պարբերության ստիլերը չպետք է փոխել ուղղակիորեն JavaScript-ի միջոցով - շատ ավելի հարմար կլինի որոշ CSS դասեր ավելացնել։
Երկրորդ, նման խնդիր իրականացնելիս ձեզ սպասվում է որոշակի անակնկալ։ Դրա էությունը հասկանալու համար եկեք նայենք պարբերությունների HTML կոդին հղումներ ավելացնելուց հետո.
html<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Այժմ պատկերացնենք, որ հղման վրա սեղմելիս պարբերության տեքստը կխաչվի։ Սակայն, հղումը այս դեպքում նույնպես պարբերության մաս է և նույնպես կխաչվի։ Ամենայն հավանականությամբ, այդպիսի էֆեկտը մեզ անհրաժեշտ չէ։ Մենք ցանկանում ենք, որ տեքստը խաչվի, բայց հղումը՝ ոչ։
Խնդիրը լուծելու համար պետք է պարզապես պարբերության
տեքստը փաթաթել span թեգի մեջ, ահա այսպես.
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 կոդը.
html<p>text1</p>
<p>text2</p>
<p>text3</p>
Ավելացրեք յուրաքանչյուր պարբերության վերջում հղում, որի սեղմումով պարբերության տեքստը կխաչվի (բայց հղումը՝ ոչ)։
Փոփոխեք նախորդ խնդիրը այնպես, որ հղման վրա սեղմելուց հետո այդ հղումը ջնջվի պարբերությունից (իսկ պարբերության տեքստը դառնա խաչված)։
Տրված է որոշակի HTML աղյուսակ։ Ավելացրեք այս աղյուսակում ևս մեկ սյունակ հղումով։ Այդ հղման վրա սեղմելիս հղումը պարունակող տողը պետք է դառնա կանաչ ֆոնով։
Փոփոխեք նախորդ խնդիրը այնպես, որ հղման վրա առաջին սեղմումը ներկի տողը կանաչ ֆոնով, իսկ երկրորդ սեղմումը չեղարկի այդ գործողությունը։