Estilização de elementos em JavaScript
Suponha que temos vários parágrafos:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Vamos percorrer esses parágrafos com um loop e adicionar
ao final de cada parágrafo um link, ao clicar no qual
uma certa estilização será adicionada ao texto do parágrafo.
Por exemplo, o texto do parágrafo ficará tachado (isso é feito
pela propriedade CSS text-decoration).
Vamos discutir dois nuances dessa tarefa.
Em primeiro lugar, como já discutido nas lições anteriores, não se deve alterar os estilos do parágrafo diretamente através do JavaScript - será muito mais conveniente aplicar algumas classes CSS.
Em segundo lugar, ao implementar essa tarefa, você encontrará uma certa surpresa. Para entender sua essência, vamos olhar para o código HTML dos parágrafos após a adição dos links:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Agora imagine que, ao clicar no link, o texto do parágrafo ficará tachado. No entanto, o link neste caso também faz parte do parágrafo e também ficará tachado! Muito provavelmente, esse efeito não é desejado. Queremos que o texto fique tachado, mas o link - não.
Para resolver o problema, basta envolver
o texto do parágrafo em uma tag span, assim:
<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>
É dado o seguinte código HTML:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Adicione ao final de cada parágrafo um link, ao clicar no qual o texto do parágrafo ficará tachado (mas o link - não).
Modifique a tarefa anterior para que após clicar no link, esse link seja removido do parágrafo (e o texto do parágrafo fique tachado).
É dada uma tabela HTML. Adicione a esta tabela mais uma coluna com um link. Ao clicar nesse link, a linha com esse link deve ficar com o fundo verde.
Modifique a tarefa anterior para que o primeiro clique no link pinte a linha de verde, e o segundo clique desfaça essa ação.
