¿Cómo cambiar el atributo de título en la etiqueta <a> usando JavaScript?

Tengo una etiqueta html, en eso inicialmente quiero nombre de información sobre herramientas como se menciona en el atributo "título". Después de hacer clic en el enlace, quiero un nombre de información sobre herramientas diferente. He usado el siguiente código pero no está funcionando. ¿Alguien puede ayudarme por favor?¿Cómo cambiar el atributo de título en la etiqueta <a> usando JavaScript?

<html> 
<head> 
<script> 

function tool(){ 
document.getElementsByName(link).title = "after click"; 
} 

</script> 
</head> 
<body> 
    <a href="javascript:tool()" name ="link" title="before click">click here</a> 
</body> 
</html>

Fuente

2009-05-22 Anonymous

usando jQuery, puede escribir el siguiente comando:

$("a#link").attr("title","after click");

Fuente

2009-05-22 12:14:05 Vikram

Aunque no está usando jQuery, está usando la manipulación DOM directa. ¿Por qué nadie sabe? –

He utilizado su código pero arrojando el error "Objeto esperado". ¿Qué debería hacer ahora? –

¿Por qué complicar las cosas al agregar jquery a la mezcla? Esto es trivial dhtml. –

document.getElementsByName("link").title = "after click";

Fuente

2009-05-22 12:16:38 PQW

Solo necesita el primer elemento de la colección. Ver la respuesta de @ Waxwing. – Cerebrus

Usted puede utilizar setAttribute (attributeName, valor) en el elemento que desea cambiar.

document.getElementById('link').setAttribute('title', 'after click');

Esto también funciona para atributos personalizados

Fuente

2009-05-22 12:16:41 Sean

Esto muestra el error "El objeto no admite esta propiedad o método" –

getElementsByName devuelve un NodeList, debe especificar qué elemento va a utilizar, es decir, getElementsByName (enlace) [algún número] .setAttribute ([... ]). – cic

Mi error. Pensé que estabas seleccionando por id. He actualizado el código. – Sean

Deshacerse de la etiqueta BR dentro de su elemento SCRIPT, y volver a escribir la función de herramienta para:

function tool(){ 
    document.getElementsByName("link")[0].title = "after click"; 
}

y funcionará. Sin embargo, no es la forma óptima. Si asigna un parámetro de id al campo, al menos puede usar document.getElementById (..), o incluso mejor, use una biblioteca como jQuery.

Fuente

2009-05-22 12:17:22 waxwing

Mostrando el error 'document.getElementsByName ("link"). 0' es nulo o no es un objeto .... –

".0"? Creo que te refieres a [0]. –

tenga en cuenta cómo se usa el 0. getElementsByName ("link") [0] es la forma correcta de acceder al elemento en la posición 0 getElementsByName ("link"). 0 intentará acceder a una propiedad que no existe, por lo tanto, su excepción – Sean

me gustaría utilizar http://jquery.com/ descargarlo y agregar una referencia script para que

Da tu una etiqueta de un id como MyLink

Luego, utilizando jQuery puede escribir

$(document).ready(function() { 

    $("#myLink").click(function(){ 

     $("#myLink").attr("title","after click"); 

    }); 

});

Fuente

2009-05-22 12:17:37

no puedo agregar una nueva biblioteca porque hay pocas restricciones en nuestra empresa. ¡Por favor, dígale a Sumother otra opción que no sea JQuery! –

Como ampelis sugiere , es mejor usar getElementById()

<a id="aLink" href="http://www.bla.com" title="hello">link</a> 
<script> 

function tool(){ 
document.getElementById('aLink').title = "after click"; 
} 

</script>

Fuente

2009-05-22 12:45:23

Dos cosas son mal con su código suministrado:

Como su nombre lo indica, documentent.getElementById ve las cosas mediante la identificación, no nombran. Deberá proporcionar una identificación en esa etiqueta de anclaje. Cambie su enlace a <a href="javascript:tool()" id="link" name="link" title="before click">click here</a>
Está alimentando documentent.getElementById el contenido de una variable llamada "enlace", que presumiblemente no existe. Realmente quería pasar una cadena literal, que necesita comillas. Cambiar esa llamada a document.getElementById("link").title = "after click";

Poniendo todo junto, esto es lo que el código se vería así:

<html> 
<head> 
    <script> 
     function tool(){ 
      document.getElementById("link").title = "after click"; 
     } 
    </script> 
</head> 
<body> 
    <a href="javascript:tool()" id="link" name="link" title="before click"> 
     click here 
    </a> 
</body> 
</html>

Fuente

2009-05-22 13:03:51

Corrección de código Jason:

document.getElementById de escritura ("link") .título en lugar de document.getElementsByName ("link"). title.

he probado en IE7 y Firefox 3.

<html> 
<head> 
    <script> 
      function tool(){ 
        document.getElementById("link").title = "after click"; 
      } 
    </script> 
</head> 
<body> 
    <a href="javascript:tool()" id="link" title="before click"> 
      click here 
    </a> 
</body> 
</html>

También puede explorar este artículo para crear buena información sobre herramientas usando javascript: http: // devirtu.com/2008/08/14/how-to-make-tooltip-with-javascript/

Fuente

2009-05-22 13:23:29 Sourabh

Gracias por eso. Supongo que eso hace 3 cosas mal con el código del OP. He corregido mi entrada. –

Supongo que esto es solo un ejemplo simplificado de lo que quiere hacer, ya que cambiar el enlace onclick se puede hacer en línea:

<a href="#" onclick="this.title='after click'" title="before click">...</a>

De cualquier forma, la mejor manera es evitar realizar todas las búsquedas por completo. Basta con pasar en la referencia a su enlace como parámetro a la función:

<script> 
    function tool(link) { 
    link.title = 'after click'; 
    } 
</script> 
<a href="#" onclick="tool(this)" title="before click">...</a>

Naturalmente, como sugiere Grant, se puede pasar el valor del título a la función, así, pero entonces usted es realmente mejor simplemente haciendo la versión en línea hasta el final y omitiendo la función.

Fuente

2009-05-22 14:03:05 levik

+1. Haría la solución un poco más genérica, con: herramienta de función (enlace, texto) {link.title = text; } y .... Pero por una sola vez, la respuesta tal como está está bien. –

<html> 
<head> 
<script> 
window.onload = function() { 
    window.document.getElementById("link").onclick = function() { 
     this.title = "after click"; 
     return false; 
    }; 
}; 
</script> 
</head> 
<body> 
    <a href="http://www.example.com" id="link" title="before click">Click Here</a> 
</body> 
</html>

Fuente

2009-05-23 15:06:45

estoy Hacer frente a 2 cuestiones: se cambia

Título al pasar el mouse, pero no en el código:
...
< a class = "a" href = "#" name = "home" title = "Home"> Inicio
...
document.getElementsByName ("home") [0] .title = "Título cambiado"; // trabajando
Cómo cambiar la clase del enlace:

DE: < a class = "a" href = "#" name = "casa" title = "Inicio"> Inicio
a: < a class = "actual" href = "#" name = "casa" title = "Inicio"> Inicio
document.getElementsByName ("casa") [0] = .class "actual"; // no funciona

Gracias!

Fuente

2009-06-24 16:45:49

necesita 'className' no clase – matpol

El título ha cambiado, pero solo en el código generado. Así es como funciona JS: aborda solo con presentación. Intenta usar la barra de herramientas Webdeveloper para Firefox porque tiene la opción de mostrar el código generado junto con el original. Si necesita alguna otra forma, piense en usar alguna programación del lado del servidor.

Mis observaciones:

nunca se mezclan JS con HTML. Si necesita actualizar su código, será mucho más fácil: busque "JS discreta" para obtener una mejor comprensión del problema. <a href="javascript:..."> o <a href="#" onclick="..."> es, por lo tanto, una mala práctica de codificación.
No utilice grandes paquetes JS como JQuery para tareas simples. Son buenos solo si se usan con todo su potencial.
¿Realmente necesita realizar manipulación de HTML sobre la marcha y por qué? ¿La información sobre herramientas del título es importante para tu código? ¿Quién debería beneficiarse con esto: usuarios finales o administradores? ¿Qué hay de la accesibilidad?
INFO en el primer bloque de código:
Si no sabemos lo que enlace a utilizar, tiene que recoger todos ellos
y luego probar la colección contra el evento onclick
Sugerencias:
- uso una mejor controlador de eventos;)
- enlaces cobrar solamente de una parte determinada de la página (principal o de navegación div) para mejorar la velocidad
salvedades:
esto puede ralentizar la renderización de páginas
título atributo es codificado y lo mismo para todos los enlaces



function changeTitle1(){ 
// find the array of links inside the document 
var a = document.getElementsByTagName('a'); 
// test the array against onclick event 
for (var i = 0, j = a.length; i

 
  
  INFO en el segundo bloque de código: 
  sabemos exactamente qué enlace para comprobar 
  Sugerencia: 
   
    
    usar un mejor control de eventos;) 
    
  salvedades: 
  esto sólo se puede utilizar en un solo elemento 
  título atributo está codificado y lo mismo para todos los enlaces 
 
 
function changeTitle2(){ 
// find the link 
var a = document.getElementById('action_link'); 
// onclick event 
a.onclick = function() { 
try{ 
// change title value 
this.title = 'This unique click happened as well!'; 
// or use setAttribute() method like this 
/* this.setAttribute('title', 'This unique click happened as well!'); */ 

// disable default link action 
return false; 
} 
// clear memory leaks with try-finally block 
finally{a = null;} 
} 
} 
 
    window.onload = function() { 
     changeTitle1(); 
     //changeTitle2(); 
    } 
 
 
 @spiro: En cuanto a su segunda pregunta acerca de los vínculos del estado actual y el cambio de su CSS ... así, el uso de CSS :)
 versión corta:

 
<style type="text/css" media="screen"> 
    #home #current-home a, 
    #contact #current-contact a, 
    #about #current-about a 
    {/* declarations to style the current state */} 
</style> 
</head> 
<body id="home"> <!-- OR body id="contact" OR body id="about" --> 
    <a href="#" title="Home" class="current-home">Home</a> 
    <a href="#" title="Contact" class="current-contact">Contact</a> 
    <a href="#" title="About us" class="current-about">About us</a>

Versión larga: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ (lea también los comentarios)

Nota: es necesario mostrar el enlace si ya está en la página actual?

Fuente

2009-11-27 14:48:05

 function changeTitle1(){ // find the array of links var a = document.getElementsByTagName('a'); // test the array against onclick event for (var i = 0, j = a.length; i < j; i++){ try{ // onclick event a[i].onclick = function() { // change title value this.title = 'OMG, you clicked me!'; // or use setAttribute() method like this /* this.setAttribute('title', 'OMG, you clicked me!'); */ // disable default link action return false; } } // clear memory leaks with try-finally block finally{a[i] = null;} } // end for loop }

–

¿Cómo cambiar el atributo de título en la etiqueta <a> usando JavaScript?

Respuesta

Cuestiones relacionadas