Comment masquer et montrer un élément XUL ?

Chaque élément XUL dispose de deux attributs permettant de le masquer ou de le montrer. Le premier est hidden qui enlève l'élément de l'affichage. Si cet attribut a la valeur true, l'élément sera invisible. Il est équivalent à la propriété CSS display mise à la valeur none.

La seconde propriété est collapsed qui réduit l'élément de telle manière qu'il n'est plus affiché. Vous pouvez obtenir l'effet similaire avec la propriété CSS visibility mise à la valeur collapse.

Dans la plupart des situations, vous pouvez employer l'un ou l'autre attribut, quoiqu'il existe des différences entre eux. Le masquage d'un élément fait que Mozilla ne créera rien à l'affichage tandis que la réduction d'un élément changera sa hauteur et sa largeur à 0. Vous noterez qu'un élément masqué ne dispose d'aucune position, tandis qu'un élément réduit aura une position. Vous pouvez obtenir la position d'un élément grâce à ses propriétés boxObject.x et boxObject.y.

L'exemple suivant montre l'utilisation des deux attributs. Cliquer sur le bouton permet de récupérer la position des deux libellés et de les rendre visible.

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="hideshow" title="Masque/Montre" width="300" height="200"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script>
function checkPositions()
{
  // Récupère les références des libellés masqués et réduits
  var hidden=document.getElementById("hiddenLabel");
  var collapsed=document.getElementById("collapsedLabel");

  // Récupère la position du libellé masqué en utilisant
  // les propriétés x et y de l'objet boxObject. Ces valeurs renseignent un libellé.
  // Le libellé masqué n'ayant pas de position, le résulat sera (0,0).
  var val="Position de l'élément hidden : "+
          hidden.boxObject.x+","+hidden.boxObject.y;
  hidden.setAttribute("value",val);

  // Enlève l'attribut hidden pour rendre le libellé visible.
  hidden.removeAttribute("hidden");

  // Récupère la position du libellé réduit.
  // Contrairement au libellé masqué, l'élément réduit dispose d'une position.
  val="Position de l'élément collapsed : "+
          hidden.boxObject.x+","+hidden.boxObject.y;
  collapsed.setAttribute("value",val);

  // Enlève l'attribut collapsed pour rendre le libellé visible.
  collapsed.removeAttribute("collapsed");
}
</script>

<button label="Vérifie les positions" oncommand="checkPositions();"/>
<label id="hiddenLabel" hidden="true"/>
<label id="collapsedLabel" collapsed="true"/>

</window>