Médiaforma

getelementbyid – Montrer ou cacher un élément

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, je vais vous montrer comment afficher ou cacher une balise HTML en agissant sur une de ses propriétés CSS via du code JavaScript.

Examinons le code HTML. Le corps du document occupe les lignes 32 à 38. Très simple, il se contente d’afficher une balise <div> d’identifiant div1 et un bouton de commande d’identifiant afficheCache. La procédure événementielle bascule() est associée au clic sur ce bouton.

Examinons le code CSS, défini entre les lignes 4 et 11. Ce code a déjà été utilisé à plusieurs reprises dans les rubriques précédentes. Il définit la couleur d’arrière-plan et les dimensions de la balise <div>.

Vous l’aurez compris, le plus gros du traitement se fait dans la fonction JavaScript bascule(), entre les lignes 12 et 29.

  • La ligne 15 définit la variable etat et y stocke la valeur de la propriété CSS display de la balise <div> div1.
  • La ligne 16 définit la variable bouton et l’initialise avec la balise d’identifiant afficheCache, c’est-à-dire avec le bouton.

Si la variable etat vaut none, cela signifie que la balise <div> n’est pas affichée. Il faut donc l’afficher. C’est ce que fait la ligne 20, en affectant la valeur block à la propriété CSS display de la balise <div>. Par la même occasion, le texte affiché sur le bouton de commande est modifié en « Cacher la balise div » ligne 21.

Si la variable etat a une autre valeur que none, cela signifie que la balise <div> est affichée. Il faut donc la dissimuler. Cette opération est réalisée dans la ligne 25, en affectant la valeur none à la propriété CSS display de la balise <div>. Le texte affiché sur le bouton de commande est également modifié en « Afficher la balise div » ligne 26.

Il ne reste plus qu’à exécuter ce code dans un navigateur. Comme vous pouvez le constater, le bouton de commande est en mesure de cacher puis de réafficher la balise <div>.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

Bonjour,

Je souhaiterai effectuer la même opération sauf qu’à la place de boutons je voudrais utiliser 2 images côte à côte. Ces images selon que l’on clique sur l’une ou l’autre dérouleraient une div contenant un contenu spécifique à chacune. Le contenu même si il sera différent selon que l’on clique sur l’une ou l’autre image devra apparaitre au même endroit.

Question1: Dois-je tout de même utiliser un input dont je modifierai les css et le background (est-ce viable sur tous les navigateur?) sinon comment puis-je faire?

Question2: Je ne suis pas très calée en javascript mais votre solution est-elle viable sur la plupart des navigateur sinon comment faire?

Question 3: est-ce gênant si je donne les même coordonnées à mes deux div de contenus ou dois-je utiliser des z-index par exemple, pour éviter que les div ne se poussent l’une et l’autre sachant qu’elles n’apparaitront jamais au même moment selon que l’on clique sur mes « images boutons ».

Merci bien!
Camille

Bonjour Camille,

Pour la question 1, il suffit d’effectuer la même manipulation, mais en pointant sur l’identifiant de l’image et non sur l’identifiant du div.

Pour les autres questions, je vous réponds très vite…

Leave a Reply