Artículos
Javascript

Modificar los enlaces con JavaScript

29/Feb/2008

Los enlaces también están dentro del modelo DOM de una página. Es por ello que mediante lenguaje Javascript podremos modificar sus atributos: el contendio, el target asignado, así como la URL a la que enlazan.

Mediante este ejemplo vamos a componer un formulario que nos permita crearnos nuestro enlace personalizado. De tal manera que elijamos el texto del enlace, la URL a la cual va a acceder, si se abrirá en una nueva ventana, en un frame o en la misma,… es decir, rellenaremos datos para poder modificar todos los valores de los atributos del enlace.

Lo primero será crear nuestro formulario:




Como cosa particular vemos que las opciones del destino del enlace se las presentamos mediante un combo. Las opciones son:

  • _blank, para abrir una nueva ventana.
  • _self, para abrirlo en la misma ventana.
  • _parent, abre en la ventana padre.
  • _top, abre eliminando todos los frames que pueda haber en la ventana.

Cuando se envíe el formulario obtenemos todos los valores para pasárselos a un método lenguaje Javascript que llamaremos modificar:

Además tendremos un enlace con valores por defecto dentro de nuestra página. Este será el enlace que vayamos modificando.

Google

Ahora pasamos a codificar el método lenguaje Javascript. Lo primero que tenemos que hacer es acceder al enlace. Para ello nos apoyamos en el método getElementByID, al cual le pasamos el ID que le hayamos dado al enlace de nuestra página.

Los atributos que podemos modificar del elemento son los siguientes:

  • innerHTML, nos permite modificar el texto del enlace.
  • href, modifica la URL de destino del enlace.
  • target, representa el destino del enlace.

El código nos quedaría de la siguiente forma:

function modificar(url,texto,destino){
  document.getElementById("mienlace").innerHTML = texto;
  document.getElementById("mienlace").href = url;
  document.getElementById("mienlace").target = destino;
}  

Código Fuente

Descárgate el código fuente de Modificar los enlaces con JavaScript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
8 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios