# Стилизация элементов на 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 таблица. Добавьте в эту таблицу еще одну колонку со ссылкой. По нажатию на эту ссылку ряд с этой ссылкой должен стать зеленого фона.

Модифицируйте предыдущую задачу так, чтобы первое нажатие по ссылке красило ряд в зеленый фон, а второе нажатие отменяло это действие.

←→
↑
en ru