мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

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

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