Comment dynamiquement cacher un objet en javascript

J'ai une page web où vous pouvez vous connecter avec votre compte. L'idée est que lorsque vous appuyez sur votre nom, un petit carré s'affiche (similaire à ce qui stackoverflow n') avec certains de vos informations de base (nom, prénom, email, etc.) C'est un mélange de php, css et javascript, mais le php est seulement de choisir le nom de l'utilisateur. J'ai donc le code suivant:

<style type="text/css">
table.UserInfo
{
    background-color:#000;
    width:100;
    height:100;
    position:fixed;
    top:10px;
    right:10px;
}
p.UserText
{
    color:#FFF;
}
</style>
<script type="text/javascript">
function showUser()
{
    //Unknown code here
}
</script>

Dans une certaine partie de la page...:
Bienvenue visiteur !

Le visiteur est en fait défini par php à un utilisateur qui est connecté ou visiteur si il n'y a aucun. Voici la boîte:

<table class='UserInfo' id='UserInfo' >
<tr>
<td><p class='UserText'>This user is a guest user. There is no information available.</p></td>
</tr>
</table>

Donc, j'ai besoin de la boîte à apparaître quand je presse le visiteur, de sorte que le code devrait aller dans showUser() et j'ai besoin de savoir où je dois mettre mon code javascript de sorte que la zone est d'abord caché.
Pour la boîte indiquant quand j'presssed il j'ai essayé de mettre ce code dans le showUser() fonction:

document.getElementById('UserInfo')style.visibility = 'hidden';

Mais il ne fonctionne pas. Je l'ai mis caché car il commence comme visible.

Merci

  • C'est la façon correcte de le faire, mais vous avez perdu le point entre les obtenez de l'élément par son id et le style
  • Merci, toutes les sources que j'ai trouvé n'a pas à mettre le point. Aussi, savez-vous où mettre le code pour le javascript pour la définir comme initialement masqué, en plus de la fonction onLoad de la balise body?
  • vous pouvez les mettre directement dans le code html de styles... il suffit de mettre une classe avec le visibility:hidden ou en ligne sur l'élément que vous souhaitez.
  • ok, merci. Qu'il a fait.
  • Pourriez-vous mettre comme une réponse? J'ai bien aimé. Et je voudrais le mettre en tant que correct
  • Assurez-vous et merci

InformationsquelleAutor rdelfin | 2011-12-19
  1. 1

    Que c'est la bonne façon de le faire, mais vous devez avoir un point entre les getElementById et de la propriété de style pour le code javascript pour fonctionner. Si vous voulez avoir de l'élément à démarrer en tant que caché soit-il donner à une classe où 

    visibility:hidden;

    ou vous pouvez le mettre comme le style en ligne pour l'élément masqué. Vous pouvez également le faire en javascript lors de l'événement load incendies, mais il est préférable de le faire dans le code html, parce que si la page est longue à rendre l'utilisateur de voir ce qui était censé être caché jusqu'à ce que le prêt événement se déclenche. Le meilleur de la chance.

    InformationsquelleAutor hackartist
  2. 8

    Vous pourriez aussi le faire:

    var_name = document.getElementById("idname").style.display = 'none';
    • J'essayais de cacher un div onclick, c'est la seule façon dont il a travaillé, j'ai essayé de visibilité = "hidden". Javascript peut être vraiment maladroit parfois, merci pour la réponse!
    InformationsquelleAutor Julian
  3. 0

    Ou jquery:

    $('.anyClass').fadeOut('fast');
    InformationsquelleAutor Alex Shilman