Стилизация на елементи в JavaScript
Нека имаме няколко параграфа:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Нека обходим тези параграфи с цикъл и в края
на всеки параграф добавим връзка, при натискане
на която към текста на параграфа ще се добавя
някаква стилизация. Например, текстът на параграфа
ще стане зачертан (това се прави със
CSS свойство text-decoration).
Нека обсъдим два нюанса на такава задача.
Първо, както вече беше обсъдено в предишните уроци, не трябва да се променят стиловете на параграфите директно чрез 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 таблица. Добавете в тази таблица още една колона с връзка. При натискане на тази връзка редът с тази връзка трябва да стане със зелен фон.
Модифицирайте предходната задача така, че първото натискане на връзката да оцветява реда в зелен фон, а второто натискане да отменя това действие.
