JavaScriptでの要素のスタイリング

いくつかの段落があるとします：

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

これらの段落をループで処理し、各段落の末尾にリンクを追加しましょう。このリンクをクリックすると、段落のテキストにスタイルが適用されます。例えば、テキストに取り消し線が引かれるようにします（これはCSSプロパティの text-decoration で実現できます）。

このタスクには2つの注意点があります。

まず、これまでのレッスンで説明したように、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

前のタスクを修正し、リンクの1回目のクリックで行の背景色を緑色にし、 2回目のクリックでその効果を解除するようにしてください。