Estilización de elementos en JavaScript
Tengamos varios párrafos:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Recorramos estos párrafos con un ciclo y al final
de cada párrafo agreguemos un enlace, al hacer clic
en el cual se agregará alguna estilización
al texto del párrafo. Por ejemplo, el texto del párrafo
se volverá tachado (esto lo hace
la propiedad CSS text-decoration).
Discutamos dos matices de tal tarea.
En primer lugar, como ya se discutió en lecciones anteriores, no se deben cambiar los estilos del párrafo directamente a través de JavaScript - será mucho más conveniente aplicar algunas clases CSS.
En segundo lugar, al implementar esta tarea te espera una sorpresa. Para entender su esencia, veamos el código HTML de los párrafos después de agregar los enlaces:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Imaginemos ahora que al hacer clic en el enlace el texto del párrafo se tacha. Sin embargo, el enlace en este caso también es parte del párrafo ¡y también se tachará! Probablemente tal efecto no nos convenga. Queremos que el texto se tache, pero el enlace no.
Para resolver el problema simplemente debemos envolver
el texto del párrafo en la etiqueta span, así:
<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>
Tenemos el siguiente código HTML:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Agrega al final de cada párrafo un enlace, al hacer clic en el cual el texto del párrafo se tache (pero el enlace no).
Modifica la tarea anterior para que después de hacer clic en el enlace este enlace se elimine del párrafo (y el texto del párrafo se vuelva tachado).
Hay una tabla HTML. Agrega a esta tabla una columna más con un enlace. Al hacer clic en este enlace la fila con este enlace debe volverse de fondo verde.
Modifica la tarea anterior para que el primer clic en el enlace pinte la fila de verde, y el segundo clic cancele esta acción.
