Stylisierung von Elementen in JavaScript

Nehmen wir an, wir haben mehrere Absätze:

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

Lassen Sie uns diese Absätze in einer Schleife durchgehen und am Ende jedes Absatzes einen Link hinzufügen, bei Klick auf den der Text des Absatzes eine bestimmte Stylisierung erhält. Zum Beispiel wird der Text des Absatzes durchgestrichen (dies bewirkt die CSS-Eigenschaft text-decoration).

Lassen Sie uns zwei Nuancen einer solchen Aufgabe besprechen.

Erstens, wie bereits in vorherigen Lektionen besprochen, sollten Sie die Stile des Absatzes nicht direkt über JavaScript ändern - es ist viel bequemer, CSS-Klassen zu verwenden.

Zweitens erwartet Sie bei der Implementierung einer solchen Aufgabe eine gewisse Überraschung. Um ihr Wesen zu verstehen, schauen wir uns den HTML-Code der Absätze nach dem Hinzufügen der Links an:

<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>

Stellen wir uns nun vor, dass bei Klick auf den Link der Text des Absatzes durchgestrichen wird. Der Link ist in diesem Fall jedoch auch Teil des Absatzes und wird ebenfalls durchgestrichen! Sehr wahrscheinlich ist ein solcher Effekt nicht gewünscht. Wir möchten, dass der Text durchgestrichen wird, aber der Link - nicht.

Um das Problem zu lösen, muss man einfach den Text des Absatzes in ein span-Tag wrappen, so:

<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>

Gegeben ist der folgende HTML-Code:

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

Fügen Sie am Ende jedes Absatzes einen Link hinzu, bei Klick auf den der Text des Absatzes durchgestrichen wird (aber der Link - nicht).

Modifizieren Sie die vorherige Aufgabe so, dass nach dem Klick auf den Link dieser Link aus dem Absatz entfernt wird (und der Text des Absatzes durchgestrichen wird).

Gegeben ist eine HTML-Tabelle. Fügen Sie dieser Tabelle eine weitere Spalte mit einem Link hinzu. Bei Klick auf diesen Link soll die Zeile mit diesem Link einen grünen Hintergrund bekommen.

Modifizieren Sie die vorherige Aufgabe so, dass der erste Klick auf den Link die Zeile grün einfärbt, und der zweite Klick diese Aktion rückgängig macht.