Стилизација на елементи во JavaScript

Нека имаме неколку параграфи:

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

Ајде да ги итерираме овие параграфи со циклус и на крајот од секој параграф да додадеме линк, при кликнување на кој текстот на параграфот ќе добие одредена стилизација. На пример, текстот на параграфот ќе стане прецртан (ова го прави CSS својството text-decoration).

Ајде да разгледаме два nuance на ваква задача.

Прво, како што беше дискутирано во претходните лекции, не треба да се менуваат стиловите на параграфите директно преку 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>

Задание 1

Даден е следниов HTML код:

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

Додадете на крајот од секој параграф линк, при кликнување на кој текстот на параграфот ќе се прецрта (а линкот - не).

Задание 2

Модифицирајте ја претходната задача така што по кликнување на линкот тој линк да се отстрани од параграфот (а текстот на параграфот да стане прецртан).

Задание 3

Дадена е некоја HTML табела. Додадете во оваа табела уште една колона со линк. При кликнување на овој линк редот со овој линк треба да добие зелена позадина.

Задание 4

Модифицирајте ја претходната задача така што првото кликнување на линкот ќе го обоји редот во зелена позадина, а второто кликнување ќе го откаже ова дејство.