Стилизација на елементи во JavaScript
Нека имаме неколку параграфи:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Ајде да ги итерираме овие параграфи со циклус и на крајот
од секој параграф да додадеме линк, при кликнување
на кој текстот на параграфот ќе добие
одредена стилизација. На пример, текстот на параграфот
ќе стане прецртан (ова го прави
CSS својството text-decoration).
Ајде да разгледаме два nuance на ваква задача.
Прво, како што беше дискутирано во претходните лекции, не треба да се менуваат стиловите на параграфите директно преку JavaScript - многу попогодно ќе биде да се додаваат некои CSS класи.
Второ, при имплементација на ваква задача ве чека одредено изненадување. За да ја разберете неговата суштина, ајде да го погледнеме HTML кодот на параграфите по додавањето на линковите:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Да замислиме сега дека при кликнување на линкот текстот на параграфот ќе се прецрта. Сепак, линкот во овој случај е исто така дел од параграфот и исто така ќе се прецрта! Најверојатно таков ефект не ни е потребен. Ние сакаме текстот да се прецрта, но линкот - не.
За решавање на проблемот едноставно треба да се обвие
текстот на параграфот во тагот span, вака:
<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>
Додадете на крајот од секој параграф линк, при кликнување на кој текстот на параграфот ќе се прецрта (а линкот - не).
Модифицирајте ја претходната задача така што по кликнување на линкот тој линк да се отстрани од параграфот (а текстот на параграфот да стане прецртан).
Дадена е некоја HTML табела. Додадете во оваа табела уште една колона со линк. При кликнување на овој линк редот со овој линк треба да добие зелена позадина.
Модифицирајте ја претходната задача така што првото кликнување на линкот ќе го обоји редот во зелена позадина, а второто кликнување ќе го откаже ова дејство.
