Comment changer l'attribut title en <a> en utilisant JavaScript?

J'ai une balise html, en ce que je veux initialement le nom de l'info-bulle comme mentionné dans l'attribut "title". Après avoir cliqué sur le lien, je veux un autre nom d'info-bulle. J'ai utilisé le code ci-dessous, mais cela ne fonctionne pas. Est-ce que quelqu'un peut m'aider s'il vous plait?Comment changer l'attribut title en <a> en utilisant 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>

Source

2009-05-22 Anonymous

En utilisant jquery, vous pouvez écrire la commande suivante:

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

Source

2009-05-22 12:14:05 Vikram

Il n'utilise pas jQuery, il utilise une manipulation directe de DOM. Pourquoi est-ce que quelqu'un devine? –

J'ai utilisé votre code mais l'erreur de lancement "Objet attendu". Qu'est-ce que je devrais faire maintenant? –

Pourquoi compliquer les choses en ajoutant jquery dans le mix? C'est dhtml trivial. –

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

Source

2009-05-22 12:16:38 PQW

Vous n'avez besoin que du premier article de la collection. Voir la réponse de Waxwing. – Cerebrus

Vous pouvez utiliser setAttribute (attributeName, valeur) sur l'élément que vous voulez changer.

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

Cela fonctionne aussi pour les attributs personnalisés

Source

2009-05-22 12:16:41 Sean

Ceci indique une erreur "L'objet ne supporte pas cette propriété ou cette méthode" –

getElementsByName retourne un NodeList, vous devez spécifier quel élément vous allez utiliser, par exemple getElementsByName (link) [un certain nombre] .setAttribute ([... ]). – cic

Mon erreur. Je pensais que tu sélectionnais par ID. J'ai mis à jour le code. – Sean

Débarrassez-vous de la balise BR dans votre élément SCRIPT, et récrire la fonction de l'outil pour:

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

et cela fonctionnera. Cependant, ce n'est pas la manière optimale. Si vous affectez un paramètre id au champ, vous pouvez au moins utiliser document.getElementById (..), ou mieux encore, utiliser une bibliothèque comme jQuery.

Source

2009-05-22 12:17:22 waxwing

Afficher l'erreur 'document.getElementsByName ("link"). 0' est null ou n'est pas un objet .... –

".0"? Je pense que vous voulez dire [0]. –

s'il vous plaît noter comment le 0 est utilisé. getElementsByName ("link") [0] est la façon correcte d'accéder à l'élément à la position 0 getElementsByName ("link"). 0 va essayer d'accéder à une propriété qui n'existe pas d'où votre exception – Sean

J'utiliser http://jquery.com/ télécharger et ajouter une référence de script pour qu'il

Donnez votre une étiquette d'identification tel que myLink

Ensuite, en utilisant JQuery vous pouvez écrire

$(document).ready(function() { 

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

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

    }); 

});

Source

2009-05-22 12:17:37

je ne peux pas ajouter une nouvelle bibliothèque parce que peu de restrictions dans notre entreprise. S'il vous plaît dites à l'autre option autre que JQuery! –

Comme le suggère jaseur , il est préférable d'utiliser getElementById()

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

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

</script>

Source

2009-05-22 12:45:23

Deux choses sont mal avec votre code fourni:

Comme son nom l'indique, documentent.getElementById regarde les choses par ID, pas le nom. Vous devrez fournir un identifiant dans cette balise d'ancrage. Changez votre lien en <a href="javascript:tool()" id="link" name="link" title="before click">click here</a>
Vous alimentez documentent.getElementById le contenu d'une variable appelée "lien", qui n'existe probablement pas. Vous vouliez réellement passer une chaîne littérale, qui a besoin de guillemets. Modifier cet appel à document.getElementById("link").title = "after click";

Mettre le tout ensemble, voici ce que votre code ressemblerait à ceci:

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

Source

2009-05-22 13:03:51

Correction au code Jason:

écrire document.getElementById ("link") .title au lieu de document.getElementsByName ("lien"). title.

Je l'ai testé sur IE7 et 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>

Vous pouvez aussi explorer cet article pour créer infobulle agréable en utilisant javascript: http: // devirtu.com/2008/08/14/how-to-make-infobulle avec JavaScript/

Source

2009-05-22 13:23:29 Sourabh

Merci pour cela. Je suppose que cela rend 3 choses erronées avec le code OP. J'ai corrigé mon entrée. –

Je suppose que c'est juste un exemple simplifié de ce que vous voulez faire, car changer le lien onclick peut se faire en ligne:

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

De toute façon, le meilleur moyen est d'éviter d'effectuer des recherches. Il suffit de passer dans la référence à votre lien en tant que paramètre à votre fonction:

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

Naturellement, comme Grant suggère, vous pouvez passer la valeur du titre à la fonction aussi bien, mais alors vous êtes vraiment mieux faire juste la version en ligne tout le chemin et en sautant la fonction.

Source

2009-05-22 14:03:05 levik

+1. Je rendrais la solution un peu plus générique avec: function tool (link, text) {link.title = text; } et .... Mais pour un one-off, la réponse est très 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>

Source

2009-05-23 15:06:45

j'aborde 2 questions ici:

Titre est modifiée lorsque la souris sur, mais pas dans le code:
...
< a class = "a" href = "#" name = "home" title = "Accueil"> Accueil
...
document.getElementsByName ("home") [0] .title = "Titre modifié"; // travail
Comment changer la classe du lien:

DE: < a class = "a" href = "#" name = "maison" title = "Accueil"> Accueil
a: < a class = "actuelle" href = "#" name = "maison" title = "Accueil"> Accueil
document.getElementsByName ("home") [0] = .class "courant"; // ne fonctionne pas

Merci!

Source

2009-06-24 16:45:49

vous avez besoin de 'className' pas classe – matpol

Le titre a été modifié, mais uniquement dans le code généré. C'est ainsi que fonctionne JS - il ne s'attaque qu'à la présentation. Essayez d'utiliser la barre d'outils Webdeveloper pour Firefox, car il a la possibilité d'afficher le code généré avec celui d'origine. Si vous avez besoin d'une autre solution, pensez à utiliser une programmation côté serveur.

Mes observations:

Ne jamais mélanger JS avec HTML. Si vous avez besoin de mettre à jour votre code, ce sera beaucoup plus facile - cherchez "JS discret" pour mieux comprendre le problème. <a href="javascript:..."> ou <a href="#" onclick="..."> est donc une mauvaise pratique de codage. N'utilisez pas de grands packages JS comme JQuery pour des tâches simples. Ils ne sont bons que s'ils sont utilisés avec leur plein potentiel.
Avez-vous vraiment besoin d'effectuer une manipulation HTML à la volée et pourquoi? L'info-bulle du titre est-elle importante pour votre code? Qui devrait en bénéficier: utilisateurs finaux ou administrateur? Et l'accessibilité?
INFO sur le premier bloc de code:
Si nous ne savons pas ce lien à utiliser, nous devons recueillir tous les
puis testez la collection contre l'événement onclick
Suggestions:
- une meilleure utilisation du gestionnaire d'événement;)
- liens ne portent que sur de partie particulière de la page (principale ou la navigation div) pour améliorer la vitesse
CAVEATS:
cela peut la page ralentir le rendu attribut title
est hardcoded et même pour tous les liens



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 sur le second bloc de code: 
  Nous savons exactement ce lien pour vérifier 
  Suggestion: 
   
    
    utiliser un meilleur gestionnaire d'événements;) 
    
  CAVEATS: 
  cela ne peut être utilisé sur un seul élément 
  titre l'attribut est codé en dur et identique pour tous les liens 
 
 
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 ce qui concerne votre deuxième question sur les liens de l'état actuel et l'évolution de leur CSS ... eh bien, l'utilisation CSS :)
 Version courte:

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

Version longue: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ (lire également les commentaires)

Remarque: est-il nécessaire d'afficher le lien si vous êtes déjà sur la page en cours?

Source

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 }

–

Comment changer l'attribut title en <a> en utilisant JavaScript?

Répondre

Questions connexes