Médiaforma

All posts tagged display

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

La propriété CSS display permet de changer le type (inline ou block) d’une balise, d’une classe ou d’un identifiant. Dans une rubrique précédente, vous avez appris que les balises <span> sont de type inline et les balises <div> de type block. Je vous propose d’inverser le type de ces deux balises en utilisant la propriété CSS display.

Examinons le code suivant :

Le corps du document définit deux balises <span>, lignes 13 et 14, et deux balises <div>, lignes 18 et 19. Normalement, les balises <span> devraient se trouver sur la même ligne et les balises <div> sur deux lignes consécutives.

Il est temps d’utiliser la propriété display pour modifier ce comportement par défaut.

La ligne 5 affecte un style block aux balises <span> dans leur ensemble. En remplaçant le mot span par une classe ou un identifiant, il aurait été possible de limiter cette conversion à certaines balises <span> seulement.

Quant à la ligne 6, elle affecte un style inline aux balises <div> dans leur ensemble. Ici également, en remplaçant le mot div par une classe ou un identifiant, il aurait été possible de limiter cette conversion à certaines balises <div> seulement.

Comme vous pouvez le constater en exécutant ce code :

–          les balises <span> sont maintenant de type block,

–          les balises <div> sont maintenant de type inline.


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