masquer/montrer une ancre dynamiquement

Question

J'ai une étiquette d'ancrage. Je veux cacher/montrer dynamiquement. Je ne peux pas le mettre dans une div/span pour une raison quelconque. Comment puis-je le faire?

Answer 1

Une fois que vous avez une référence à l'élément DOM de la balise d'ancrage, faites ceci:

// Hide 
element.style.display = "none"; 

// Show again 
element.style.display = ""; 

Il y a plusieurs façons dont vous obtiendriez cette référence. Par exemple, si l'ancre a une id, vous pouvez utiliser getElementById:

HTML:

<a href='whatever' id='foo'>Whatever</a> 

JavaScript:

element = document.getElementById('foo'); 

Si l'ancre ne dispose pas d'un ID et vous n » Si vous voulez en ajouter un pour une raison quelconque, vous pouvez utiliser d'autres informations pour identifier l'élément correct. Ceci est le plus facilement fait avec une bibliothèque comme jQuery, Prototype, YUI, Closure, ou any of several others qui vous donnera la possibilité d'utiliser des sélecteurs CSS pour trouver l'ancre (s) en question. Sans bibliothèque, vous devez compter sur un petit nombre de fonctions DOM bien supportées ou gérer les variations du navigateur, ce que les bibliothèques vous aident à éviter.

Voici un exemple (live copy) de bouclage tous des ancres sur une page et en se cachant un basé sur son href:

HTML:

<a href='http://stackoverflow.com'>StackOverflow</a> 
<a href='http://superuser.com'>SuperUser</a> 
<a href='http://serverfault.com'>ServerFault</a> 

JavaScript:

var links, index, link; 

links = document.getElementsByTagName('a'); 
for (index = 0; index < links.length; ++index) { 
    link = links[index]; 
    if (link.href.indexOf('superuser') >= 0) { 
    link.style.display = "none"; 
    break; 
    } 
} 

Cela devient nettement plus facile si vous utilisez une bibliothèque. Par exemple, voici une version jQuery de celui-ci (live copy):

$('a[href*=superuser]').hide(); 

est ici la version prototype (live copy):

$$('a[href*=superuser]').invoke('hide');